/**
 * MG2025 Theme - Breadcrumb Unificato
 * Stili per breadcrumb in gallery toolbar
 * Responsive: sidebar su mobile, toolbar su desktop
 */

/* ============================================
   BREADCRUMB BASE
   ============================================ */

#breadcrumb-nav {
    position: relative;
    z-index: 10;
    background: var(--mg-card);
    border-bottom: 1px solid var(--mg-border);
    padding: 0;
    margin: 0;
}

.breadcrumb-container {
    padding: 16px 24px;
    max-width: 100%;
    overflow: hidden;
}

.breadcrumb-list {
    display: flex;
    align-items: center;
    gap: 8px;
    list-style: none;
    margin: 0;
    padding: 0;
    flex-wrap: wrap;
}

.breadcrumb-item {
    display: flex;
    align-items: center;
    gap: 8px;
}

.breadcrumb-link {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--mg-muted);
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    transition: color 160ms ease-out;
    white-space: nowrap;
}

.breadcrumb-link:hover {
    color: var(--mg-text);
}

.breadcrumb-separator {
    color: var(--mg-muted);
    font-size: 14px;
    font-weight: 400;
    user-select: none;
}

.breadcrumb-current {
    color: var(--mg-text);
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 200px;
}

.breadcrumb-home-icon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

/* ============================================
   GALLERY TOOLBAR BREADCRUMB
   ============================================ */

.mg2025-gallery-toolbar {
    position: relative;
    z-index: 10;
    background: var(--mg-card);
    border-bottom: 1px solid var(--mg-border);
    padding: 0;
    margin: 0;
}

.mg2025-gallery-toolbar .breadcrumb-container {
    padding: 16px 24px;
    max-width: 100%;
    overflow: hidden;
}

.mg2025-gallery-toolbar .breadcrumb-list {
    display: flex !important;
    align-items: center;
    gap: 8px;
    list-style: none;
    margin: 0;
    padding: 0;
    flex-wrap: wrap;
}

.mg2025-gallery-toolbar .breadcrumb-item {
    display: flex !important;
    align-items: center;
    gap: 8px;
}

.mg2025-gallery-toolbar .breadcrumb-link {
    display: flex !important;
    align-items: center;
    gap: 6px;
    color: var(--mg-muted);
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    transition: color 160ms ease-out;
    white-space: nowrap;
}

.mg2025-gallery-toolbar .breadcrumb-link:hover {
    color: var(--mg-text);
}

.mg2025-gallery-toolbar .breadcrumb-separator {
    color: var(--mg-muted);
    font-size: 14px;
    font-weight: 400;
    user-select: none;
}

.mg2025-gallery-toolbar .breadcrumb-current {
    color: var(--mg-text);
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 200px;
}

.mg2025-gallery-toolbar .breadcrumb-home-icon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

/* ============================================
   RESPONSIVE BEHAVIOR
   ============================================ */

/* Desktop (≥992px) - Breadcrumb in gallery toolbar */
@media (min-width: 992px) {
    .mg2025-gallery-toolbar {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        height: auto !important;
        width: auto !important;
        position: static !important;
        left: auto !important;
        top: auto !important;
    }
    
    .mg2025-gallery-toolbar .breadcrumb-container {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        height: auto !important;
        width: auto !important;
        position: static !important;
        left: auto !important;
        top: auto !important;
    }
    
    .mg2025-gallery-toolbar .breadcrumb-list {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    .mg2025-gallery-toolbar .breadcrumb-item {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    .mg2025-gallery-toolbar .breadcrumb-link {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    .mg2025-gallery-toolbar .breadcrumb-current {
        display: inline !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
}

/* Tablet (768-991px) - Breadcrumb in gallery toolbar */
@media (min-width: 768px) and (max-width: 991px) {
    .mg2025-gallery-toolbar {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    .mg2025-gallery-toolbar .breadcrumb-container {
        padding: 12px 20px;
    }
    
    .mg2025-gallery-toolbar .breadcrumb-current {
        max-width: 150px;
    }
}

/* Mobile (≤767px) - Breadcrumb in gallery toolbar */
@media (max-width: 767px) {
    .mg2025-gallery-toolbar {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    .mg2025-gallery-toolbar .breadcrumb-container {
        padding: 12px 16px;
    }
    
    .mg2025-gallery-toolbar .breadcrumb-list {
        gap: 6px;
    }
    
    .mg2025-gallery-toolbar .breadcrumb-link {
        font-size: 13px;
    }
    
    .mg2025-gallery-toolbar .breadcrumb-current {
        font-size: 13px;
        max-width: 120px;
    }
    
    .mg2025-gallery-toolbar .breadcrumb-home-icon {
        width: 14px;
        height: 14px;
    }
}

/* ============================================
   SIDEBAR BREADCRUMB HIDDEN
   ============================================ */

/* Nascondi breadcrumb nella sidebar su desktop */
@media (min-width: 992px) {
    .mg2025-sidebar #breadcrumb-nav,
    .mg2025-detail-sidebar #breadcrumb-nav {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        height: 0 !important;
        width: 0 !important;
        overflow: hidden !important;
        position: absolute !important;
        left: -9999px !important;
        top: -9999px !important;
    }
}

/* Mostra breadcrumb nella sidebar su mobile */
@media (max-width: 991px) {
    .mg2025-sidebar #breadcrumb-nav,
    .mg2025-detail-sidebar #breadcrumb-nav {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        height: auto !important;
        width: auto !important;
        position: static !important;
        left: auto !important;
        top: auto !important;
        border-bottom: 1px solid var(--mg-border);
        margin-bottom: 20px;
    }
    
    .mg2025-sidebar .breadcrumb-container,
    .mg2025-detail-sidebar .breadcrumb-container {
        padding: 12px 16px;
    }
}

/* ============================================
   ACCESSIBILITY
   ============================================ */

.breadcrumb-list[aria-label="breadcrumb"] {
    /* Screen reader support */
}

.breadcrumb-link:focus {
    outline: 2px solid var(--mg-accent);
    outline-offset: 2px;
    border-radius: 2px;
}

.breadcrumb-current {
    /* Current page indicator for screen readers */
}

/* ============================================
   DARK MODE SUPPORT
   ============================================ */

@media (prefers-color-scheme: dark) {
    .breadcrumb-link {
        color: var(--mg-muted-dark, #888);
    }
    
    .breadcrumb-link:hover {
        color: var(--mg-text-dark, #fff);
    }
    
    .breadcrumb-current {
        color: var(--mg-text-dark, #fff);
    }
    
    .breadcrumb-separator {
        color: var(--mg-muted-dark, #888);
    }
}