/* Breadcrumb Component Styles */
/* Following PrimeNG CSS class conventions */

.p-breadcrumb {
    padding: var(--p-breadcrumb-padding, 0.75rem 1rem);
    background: var(--p-breadcrumb-background, transparent);
    gap: var(--p-breadcrumb-gap, 0.5rem);
    transition-duration: var(--p-breadcrumb-transition-duration, 0.2s);
    border-radius: var(--p-breadcrumb-border-radius, 6px);
}

.p-breadcrumb-list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--p-breadcrumb-gap, 0.5rem);
}

.p-breadcrumb-home-item,
.p-breadcrumb-item {
    display: flex;
    align-items: center;
}

.p-breadcrumb-item-link {
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: var(--p-breadcrumb-item-gap, 0.25rem);
    color: var(--p-breadcrumb-item-color, #6b7280);
    border-radius: var(--p-breadcrumb-item-border-radius, 4px);
    padding: 0.25rem 0.5rem;
    transition: all var(--p-breadcrumb-transition-duration, 0.2s);
    outline: none;
    position: relative;
}

.p-breadcrumb-item-link:hover {
    color: var(--p-breadcrumb-item-hover-color, #374151);
    background: var(--p-breadcrumb-item-hover-background, rgba(0, 0, 0, 0.04));
}

.p-breadcrumb-item-link:focus {
    outline: var(--p-breadcrumb-item-focus-ring-width, 2px) var(--p-breadcrumb-item-focus-ring-style, solid) var(--p-breadcrumb-item-focus-ring-color, #3b82f6);
    outline-offset: var(--p-breadcrumb-item-focus-ring-offset, 2px);
    box-shadow: var(--p-breadcrumb-item-focus-ring-shadow, 0 0 0 2px rgba(59, 130, 246, 0.2));
}

.p-breadcrumb-item-link.disabled {
    color: var(--p-breadcrumb-item-disabled-color, #9ca3af);
    cursor: not-allowed;
    pointer-events: none;
}

.p-breadcrumb-item-link[aria-current="page"] {
    color: var(--p-breadcrumb-item-current-color, #111827);
    font-weight: 600;
}

.p-breadcrumb-current {
    color: var(--p-breadcrumb-item-current-color, #111827);
    font-weight: 600;
}

button.p-breadcrumb-current {
    border: 0;
    background: transparent;
    cursor: pointer;
}

.p-breadcrumb-item-icon {
    color: var(--p-breadcrumb-item-icon-color, #6b7280);
    font-size: 0.875rem;
    transition: color var(--p-breadcrumb-transition-duration, 0.2s);
}

.p-breadcrumb-item-link:hover .p-breadcrumb-item-icon {
    color: var(--p-breadcrumb-item-icon-hover-color, #374151);
}

.p-breadcrumb-item-label {
    font-size: 0.875rem;
    line-height: 1.25rem;
}

.p-breadcrumb-item-badge {
    border-radius: 999px;
    background: rgba(59, 130, 246, 0.12);
    color: #1d4ed8;
    font-size: 0.6875rem;
    font-weight: 600;
    line-height: 1;
    padding: 0.2rem 0.45rem;
}

.p-breadcrumb-item-shortcut {
    color: var(--p-breadcrumb-shortcut-color, #94a3b8);
    font-size: 0.6875rem;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.01em;
}

.p-breadcrumb-template,
.p-breadcrumb-template-content,
.p-breadcrumb-template-meta-row {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.p-breadcrumb-template-rich {
    gap: 0.55rem;
}

.p-breadcrumb-template-content {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.1rem;
}

.p-breadcrumb-template-meta-row {
    gap: 0.35rem;
}

.p-breadcrumb-item-description {
    color: var(--p-breadcrumb-description-color, #64748b);
    font-size: 0.75rem;
    line-height: 1.1;
}

.p-breadcrumb-separator {
    color: var(--p-breadcrumb-separator-color, #9ca3af);
    font-size: 0.75rem;
    display: flex;
    align-items: center;
    user-select: none;
}

/* Size variants */
.p-breadcrumb-sm {
    padding: var(--p-breadcrumb-sm-padding, 0.5rem 0.75rem);
    gap: var(--p-breadcrumb-sm-gap, 0.375rem);
}

.p-breadcrumb-sm .p-breadcrumb-item-link {
    padding: 0.125rem 0.375rem;
    gap: var(--p-breadcrumb-sm-item-gap, 0.125rem);
}

.p-breadcrumb-sm .p-breadcrumb-item-icon {
    font-size: 0.75rem;
}

.p-breadcrumb-sm .p-breadcrumb-item-label {
    font-size: 0.75rem;
    line-height: 1rem;
}

.p-breadcrumb-lg {
    padding: var(--p-breadcrumb-lg-padding, 1rem 1.25rem);
    gap: var(--p-breadcrumb-lg-gap, 0.75rem);
}

.p-breadcrumb-lg .p-breadcrumb-item-link {
    padding: 0.375rem 0.75rem;
    gap: var(--p-breadcrumb-lg-item-gap, 0.375rem);
}

.p-breadcrumb-lg .p-breadcrumb-item-icon {
    font-size: 1rem;
}

.p-breadcrumb-lg .p-breadcrumb-item-label {
    font-size: 1rem;
    line-height: 1.5rem;
}

/* Theme variants */
.p-breadcrumb-minimal {
    background: transparent;
    padding: 0.5rem 0;
}

.p-breadcrumb-outlined {
    border: 1px solid var(--p-breadcrumb-border-color, #e5e7eb);
    background: var(--p-breadcrumb-outlined-background, #ffffff);
}

.p-breadcrumb-filled {
    background: var(--p-breadcrumb-filled-background, #f9fafb);
    border: 1px solid var(--p-breadcrumb-border-color, #e5e7eb);
}

/* Responsive behavior */
.p-breadcrumb-responsive {
    overflow: visible;
}

.p-breadcrumb-collapsed .p-breadcrumb-item:not(:first-child):not(:last-child) {
    display: none;
}

.p-breadcrumb-collapsed .p-breadcrumb-ellipsis {
    display: flex;
    align-items: center;
    color: var(--p-breadcrumb-separator-color, #9ca3af);
    font-size: 0.875rem;
    padding: 0.25rem 0.5rem;
}

.p-breadcrumb-ellipsis:empty::before {
    content: "...";
}

.p-breadcrumb-expand-trigger {
    border: 0;
    background: transparent;
    color: var(--p-breadcrumb-separator-color, #9ca3af);
    cursor: pointer;
    font: inherit;
    line-height: 1;
    padding: 0.25rem 0.4rem;
    border-radius: 4px;
}

.p-breadcrumb-expand-trigger:hover {
    background: var(--p-breadcrumb-item-hover-background, rgba(0, 0, 0, 0.04));
    color: var(--p-breadcrumb-item-hover-color, #374151);
}

.p-breadcrumb-expand-trigger:focus-visible {
    outline: var(--p-breadcrumb-item-focus-ring-width, 2px) var(--p-breadcrumb-item-focus-ring-style, solid) var(--p-breadcrumb-item-focus-ring-color, #3b82f6);
    outline-offset: var(--p-breadcrumb-item-focus-ring-offset, 2px);
}

.p-breadcrumb-expand-trigger i {
    font-size: 1rem;
    line-height: 1;
}

.p-breadcrumb-overflow-surface {
    position: relative;
}

.p-breadcrumb-overflow-menu {
    position: absolute;
    top: calc(100% + 0.35rem);
    left: 0;
    z-index: 10;
    min-width: 10rem;
    margin: 0;
    padding: 0.35rem;
    list-style: none;
    border: 1px solid rgba(148, 163, 184, 0.35);
    border-radius: 0.75rem;
    background: #fff;
    box-shadow: 0 12px 30px rgba(15, 23, 42, 0.14);
}

.p-breadcrumb-overflow-item {
    margin: 0;
}

.p-breadcrumb-overflow-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.5rem 0.6rem;
    border-radius: 0.5rem;
}

.p-breadcrumb-overflow-link:hover {
    background: var(--p-breadcrumb-item-hover-background, rgba(0, 0, 0, 0.04));
}

/* Wrap behavior */
.p-breadcrumb-wrap .p-breadcrumb-list {
    flex-wrap: wrap;
}

.p-breadcrumb-scroll .p-breadcrumb-list {
    flex-wrap: nowrap;
}

.p-breadcrumb-scroll {
    overflow-x: auto;
    overflow-y: visible;
}

.p-breadcrumb-rtl .p-breadcrumb-list {
    direction: rtl;
}

.p-breadcrumb-rtl .p-breadcrumb-separator i {
    transform: scaleX(-1);
}

.p-breadcrumb-truncate-tail .p-breadcrumb-item-label,
.p-breadcrumb-truncate-middle .p-breadcrumb-item-label {
    max-width: 18ch;
    overflow: hidden;
    white-space: nowrap;
}

.p-breadcrumb-truncate-tail .p-breadcrumb-item-label {
    text-overflow: ellipsis;
}

/* Animation classes */
.p-breadcrumb-fade-in {
    animation: breadcrumbFadeIn 0.3s ease-in-out;
}

.p-breadcrumb-slide-in {
    animation: breadcrumbSlideIn 0.3s ease-in-out;
}

.p-breadcrumb-scale-in {
    animation: breadcrumbScaleIn 0.3s ease-in-out;
}

@keyframes breadcrumbFadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes breadcrumbSlideIn {
    from {
        transform: translateX(-10px);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes breadcrumbScaleIn {
    from {
        transform: scale(0.95);
        opacity: 0;
    }
    to {
        transform: scale(1);
        opacity: 1;
    }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .p-breadcrumb-item-link {
        border: 1px solid transparent;
    }
    
    .p-breadcrumb-item-link:focus {
        border-color: currentColor;
    }
    
    .p-breadcrumb-separator {
        font-weight: bold;
    }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    .p-breadcrumb,
    .p-breadcrumb-item-link,
    .p-breadcrumb-item-icon {
        transition: none;
    }
    
    .p-breadcrumb-fade-in,
    .p-breadcrumb-slide-in,
    .p-breadcrumb-scale-in {
        animation: none;
    }
}

/* Dark mode support */
@media (prefers-color-scheme: dark) {
    .p-breadcrumb {
        --p-breadcrumb-item-color: #d1d5db;
        --p-breadcrumb-item-hover-color: #f9fafb;
        --p-breadcrumb-item-current-color: #ffffff;
        --p-breadcrumb-item-icon-color: #d1d5db;
        --p-breadcrumb-item-icon-hover-color: #f9fafb;
        --p-breadcrumb-separator-color: #6b7280;
        --p-breadcrumb-item-hover-background: rgba(255, 255, 255, 0.1);
        --p-breadcrumb-filled-background: #1f2937;
        --p-breadcrumb-outlined-background: #111827;
        --p-breadcrumb-border-color: #374151;
    }
}

/* Print styles */
@media print {
    .p-breadcrumb {
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
    }
    
    .p-breadcrumb-item-link {
        color: #000000 !important;
        text-decoration: underline;
    }
    
    .p-breadcrumb-separator {
        color: #000000 !important;
    }
}

/* ============================================================================
   Cross-design-system skins (GAC: UX-DESIGN-SYNTHESIS-001 Configuration
   Breadth Mandate). One canonical component, many looks — selected by the
   `appearance.skin` config token via `p-breadcrumb-skin-<token>`, tuned by the
   `--rr-breadcrumb-radius` / `--rr-breadcrumb-accent-h` custom properties the
   component emits from its appearance tokens. Defaults (PrimeNg skin, no extra
   classes) reproduce the historical look so existing consumers are unaffected.
   ============================================================================ */

/* --- Material UI look ----------------------------------------------------- */
.p-breadcrumb-skin-material {
    --p-breadcrumb-item-color: hsl(var(--rr-breadcrumb-accent-h, 214) 9% 40%);
    --p-breadcrumb-item-hover-color: hsl(var(--rr-breadcrumb-accent-h, 214) 70% 42%);
    --p-breadcrumb-item-current-color: rgba(0, 0, 0, 0.87);
    --p-breadcrumb-item-icon-color: hsl(var(--rr-breadcrumb-accent-h, 214) 12% 45%);
    --p-breadcrumb-separator-color: rgba(0, 0, 0, 0.36);
    --p-breadcrumb-item-hover-background: transparent;
    font-family: Roboto, "Segoe UI", system-ui, sans-serif;
    letter-spacing: 0.01071em;
}

.p-breadcrumb-skin-material .p-breadcrumb-item-link {
    border-radius: 0;
    padding: 0 2px;
}

.p-breadcrumb-skin-material .p-breadcrumb-item-link:hover {
    text-decoration: underline;
    text-underline-offset: 2px;
    background: transparent;
}

.p-breadcrumb-skin-material .p-breadcrumb-separator {
    font-size: 0.8rem;
    margin: 0 2px;
}

/* Outlined/Filled themes become MUI-style Chip crumbs under the Material skin */
.p-breadcrumb-skin-material.p-breadcrumb-outlined .p-breadcrumb-item-link,
.p-breadcrumb-skin-material.p-breadcrumb-filled .p-breadcrumb-item-link {
    border-radius: calc(var(--rr-breadcrumb-radius, 16) * 1px);
    padding: 0.2rem 0.65rem;
}

.p-breadcrumb-skin-material.p-breadcrumb-filled .p-breadcrumb-item-link {
    background: rgba(0, 0, 0, 0.08);
}

.p-breadcrumb-skin-material.p-breadcrumb-filled .p-breadcrumb-item-link:hover {
    background: rgba(0, 0, 0, 0.13);
    text-decoration: none;
}

.p-breadcrumb-skin-material.p-breadcrumb-outlined .p-breadcrumb-item-link {
    border: 1px solid rgba(0, 0, 0, 0.18);
    background: transparent;
}

/* --- PrimeNG look (explicit; matches the historical default) -------------- */
.p-breadcrumb-skin-primeng .p-breadcrumb-item-link {
    border-radius: calc(var(--rr-breadcrumb-radius, 6) * 1px);
}

.p-breadcrumb-skin-primeng .p-breadcrumb-item-link[aria-current="page"],
.p-breadcrumb-skin-primeng .p-breadcrumb-current {
    color: hsl(var(--rr-breadcrumb-accent-h, 214) 60% 30%);
}

/* --- Microsoft Fluent look ------------------------------------------------ */
.p-breadcrumb-skin-fluent {
    --p-breadcrumb-item-color: #605e5c;
    --p-breadcrumb-item-hover-color: #201f1e;
    --p-breadcrumb-item-current-color: #201f1e;
    --p-breadcrumb-separator-color: #a19f9d;
    --p-breadcrumb-item-hover-background: #f3f2f1;
    font-family: "Segoe UI", system-ui, sans-serif;
}

.p-breadcrumb-skin-fluent .p-breadcrumb-item-link {
    border-radius: calc(var(--rr-breadcrumb-radius, 4) * 1px);
    font-weight: 600;
}

.p-breadcrumb-skin-fluent .p-breadcrumb-item-link[aria-current="page"],
.p-breadcrumb-skin-fluent .p-breadcrumb-current {
    font-weight: 600;
}

/* --- IBM Carbon look ------------------------------------------------------ */
.p-breadcrumb-skin-carbon {
    --p-breadcrumb-item-color: hsl(var(--rr-breadcrumb-accent-h, 214) 89% 60%);
    --p-breadcrumb-item-hover-color: hsl(var(--rr-breadcrumb-accent-h, 214) 89% 48%);
    --p-breadcrumb-item-current-color: #161616;
    --p-breadcrumb-separator-color: #525252;
    --p-breadcrumb-item-hover-background: transparent;
    font-family: "IBM Plex Sans", system-ui, sans-serif;
}

.p-breadcrumb-skin-carbon .p-breadcrumb-item-link {
    border-radius: 0;
    padding: 0 2px;
    text-decoration: none;
}

.p-breadcrumb-skin-carbon .p-breadcrumb-item-link:hover {
    text-decoration: underline;
    background: transparent;
}

.p-breadcrumb-skin-carbon .p-breadcrumb-separator {
    color: #525252;
}

/* --- Minimal skin (chromeless) ------------------------------------------- */
.p-breadcrumb-skin-minimal {
    --p-breadcrumb-item-hover-background: transparent;
    --p-breadcrumb-separator-color: #cbd5e1;
}

.p-breadcrumb-skin-minimal .p-breadcrumb-item-link {
    padding: 0 1px;
    border-radius: 0;
}

.p-breadcrumb-skin-minimal .p-breadcrumb-item-link:hover {
    background: transparent;
    text-decoration: underline;
}

/* --- Hybrid skin (accent pills + chevrons) -------------------------------- */
.p-breadcrumb-skin-hybrid {
    --p-breadcrumb-separator-color: hsl(var(--rr-breadcrumb-accent-h, 214) 45% 60%);
}

.p-breadcrumb-skin-hybrid .p-breadcrumb-item-link {
    border-radius: 999px;
    padding: 0.18rem 0.7rem;
    background: hsl(var(--rr-breadcrumb-accent-h, 214) 80% 96%);
    color: hsl(var(--rr-breadcrumb-accent-h, 214) 45% 35%);
}

.p-breadcrumb-skin-hybrid .p-breadcrumb-item-link:hover {
    background: hsl(var(--rr-breadcrumb-accent-h, 214) 80% 90%);
}

.p-breadcrumb-skin-hybrid .p-breadcrumb-item-link[aria-current="page"],
.p-breadcrumb-skin-hybrid .p-breadcrumb-current {
    background: hsl(var(--rr-breadcrumb-accent-h, 214) 65% 45%);
    color: #ffffff;
    border-radius: 999px;
    padding: 0.18rem 0.7rem;
}

/* --- Density tokens (orthogonal to skin) ---------------------------------- */
.p-breadcrumb-density-compact {
    padding: 0.35rem 0.6rem;
    gap: 0.3rem;
}

.p-breadcrumb-density-compact .p-breadcrumb-list {
    gap: 0.3rem;
}

.p-breadcrumb-density-spacious {
    padding: 1rem 1.35rem;
    gap: 0.85rem;
}

.p-breadcrumb-density-spacious .p-breadcrumb-list {
    gap: 0.85rem;
}

/* --- Elevation + uppercase tokens ----------------------------------------- */
.p-breadcrumb-elevated {
    box-shadow: 0 6px 20px rgba(15, 23, 42, 0.12);
}

.p-breadcrumb-uppercase .p-breadcrumb-item-label {
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: 0.78rem;
}