/* assets/css/navigation.css */

/* ==========================================
   ORIGINAL BREADCRUMB STYLES (kept for backward compatibility)
   ========================================== */
.nav-breadcrumb {
    background: var(--white);
    padding: 1rem 0;
    border-bottom: 1px solid var(--border);
    box-shadow: var(--shadow-sm);
}

.breadcrumb {
    background: transparent;
    padding: 0;
    margin: 0;
}

.breadcrumb-item a {
    color: var(--text-secondary);
    text-decoration: none;
    transition: color 0.2s ease;
}

.breadcrumb-item a:hover {
    color: var(--primary);
}

.breadcrumb-item.active {
    color: var(--navy);
    font-weight: 500;
}

/* ==========================================
   SLIM BREADCRUMB NAVIGATION - USING BANK-PRIMARY COLORS
   ========================================== */

/* Main container - maintains header-like white bar structure */
.nav-breadcrumb-hybrid {
    background: var(--white, #ffffff);
    padding: 0.75rem 0;  /* Standard slim height */
    border-bottom: 1px solid var(--border, #e5e7eb);
    box-shadow: var(--shadow-sm, 0 1px 2px 0 rgba(0, 0, 0, 0.05));
    position: relative;
    z-index: 10;
}

/* Content within the white bar */
.breadcrumb-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.75rem;
}

/* Navigation container within the white bar */
.breadcrumb-navigation {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex: 1;
}

/* ==========================================
   STANDARD SLIM CHIP STYLES (28px height)
   ========================================== */

/* Base chip styles */
.nav-chip {
    padding: 0.25rem 0.65rem;  /* Standard slim padding */
    border-radius: 16px;
    text-decoration: none;
    font-size: 0.8rem;
    font-weight: 500;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 0.3rem;
    border: 1px solid;
    line-height: 1.2;
    min-height: 28px;          /* Standard slim height */
    box-sizing: border-box;
}

/* ==========================================
   FEDERAL RESERVE COLORS (BLUE - bank-primary: #2563eb)
   ========================================== */
.fed .nav-chip {
    background: rgba(37, 99, 235, 0.1) !important;    /* Fed blue */
    color: #2563eb !important;
    border-color: rgba(37, 99, 235, 0.2) !important;
}

.fed .nav-chip:hover {
    background: rgba(37, 99, 235, 0.15) !important;
    color: #1d4ed8 !important;
    border-color: rgba(37, 99, 235, 0.3) !important;
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(37, 99, 235, 0.2);
}

.fed .nav-chip.current {
    background: #2563eb !important;
    color: #ffffff !important;
    border-color: #2563eb !important;
}

/* ==========================================
   EUROPEAN CENTRAL BANK COLORS (BLUE - bank-primary: #0284c7)
   ========================================== */
.ecb .nav-chip {
    background: rgba(2, 132, 199, 0.1) !important;    /* ECB blue */
    color: #0284c7 !important;
    border-color: rgba(2, 132, 199, 0.2) !important;
}

.ecb .nav-chip:hover {
    background: rgba(2, 132, 199, 0.15) !important;
    color: #0369a1 !important;
    border-color: rgba(2, 132, 199, 0.3) !important;
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(2, 132, 199, 0.2);
}

.ecb .nav-chip.current {
    background: #0284c7 !important;
    color: #ffffff !important;
    border-color: #0284c7 !important;
}

/* ==========================================
   BANK OF ENGLAND COLORS (PURPLE - bank-primary: #7c3aed)
   ========================================== */
.boe .nav-chip {
    background: rgba(124, 58, 237, 0.1) !important;   /* BoE purple */
    color: #7c3aed !important;
    border-color: rgba(124, 58, 237, 0.2) !important;
}

.boe .nav-chip:hover {
    background: rgba(124, 58, 237, 0.15) !important;
    color: #6d28d9 !important;
    border-color: rgba(124, 58, 237, 0.3) !important;
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(124, 58, 237, 0.2);
}

.boe .nav-chip.current {
    background: #7c3aed !important;
    color: #ffffff !important;
    border-color: #7c3aed !important;
}

/* ==========================================
   BANK OF JAPAN COLORS (RED - bank-primary: #dc2626)
   ========================================== */
.boj .nav-chip {
    background: rgba(220, 38, 38, 0.1) !important;    /* BoJ red */
    color: #dc2626 !important;
    border-color: rgba(220, 38, 38, 0.2) !important;
}

.boj .nav-chip:hover {
    background: rgba(220, 38, 38, 0.15) !important;
    color: #b91c1c !important;
    border-color: rgba(220, 38, 38, 0.3) !important;
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(220, 38, 38, 0.2);
}

.boj .nav-chip.current {
    background: #dc2626 !important;
    color: #ffffff !important;
    border-color: #dc2626 !important;
}

/* ==========================================
   BANK OF CANADA COLORS (RED - bank-primary: #dc2626)
   ========================================== */
.boc .nav-chip {
    background: rgba(220, 38, 38, 0.1) !important;    /* BoC red */
    color: #dc2626 !important;
    border-color: rgba(220, 38, 38, 0.2) !important;
}

.boc .nav-chip:hover {
    background: rgba(220, 38, 38, 0.15) !important;
    color: #b91c1c !important;
    border-color: rgba(220, 38, 38, 0.3) !important;
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(220, 38, 38, 0.2);
}

.boc .nav-chip.current {
    background: #dc2626 !important;
    color: #ffffff !important;
    border-color: #dc2626 !important;
}

/* ==========================================
   SWISS NATIONAL BANK COLORS (RED - bank-primary: #dc2626)
   ========================================== */
.snb .nav-chip {
    background: rgba(220, 38, 38, 0.1) !important;    /* SNB red */
    color: #dc2626 !important;
    border-color: rgba(220, 38, 38, 0.2) !important;
}

.snb .nav-chip:hover {
    background: rgba(220, 38, 38, 0.15) !important;
    color: #b91c1c !important;
    border-color: rgba(220, 38, 38, 0.3) !important;
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(220, 38, 38, 0.2);
}

.snb .nav-chip.current {
    background: #dc2626 !important;
    color: #ffffff !important;
    border-color: #dc2626 !important;
}

/* ==========================================
   RESERVE BANK OF AUSTRALIA COLORS (GREEN - bank-primary: #059669)
   ========================================== */
.rba .nav-chip {
    background: rgba(5, 150, 105, 0.1) !important;    /* RBA green */
    color: #059669 !important;
    border-color: rgba(5, 150, 105, 0.2) !important;
}

.rba .nav-chip:hover {
    background: rgba(5, 150, 105, 0.15) !important;
    color: #047857 !important;
    border-color: rgba(5, 150, 105, 0.3) !important;
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(5, 150, 105, 0.2);
}

.rba .nav-chip.current {
    background: #059669 !important;
    color: #ffffff !important;
    border-color: #059669 !important;
}

/* ==========================================
   RESERVE BANK OF INDIA COLORS (ORANGE - bank-primary: #ea580c)
   ========================================== */
.rbi .nav-chip {
    background: rgba(234, 88, 12, 0.1) !important;    /* RBI orange */
    color: #ea580c !important;
    border-color: rgba(234, 88, 12, 0.2) !important;
}

.rbi .nav-chip:hover {
    background: rgba(234, 88, 12, 0.15) !important;
    color: #c2410c !important;
    border-color: rgba(234, 88, 12, 0.3) !important;
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(234, 88, 12, 0.2);
}

.rbi .nav-chip.current {
    background: #ea580c !important;
    color: #ffffff !important;
    border-color: #ea580c !important;
}

/* ==========================================
   PEOPLES BANK OF CHINA COLORS (RED - bank-primary: #dc2626)
   ========================================== */
.pboc .nav-chip {
    background: rgba(220, 38, 38, 0.1) !important;    /* PBOC red */
    color: #dc2626 !important;
    border-color: rgba(220, 38, 38, 0.2) !important;
}

.pboc .nav-chip:hover {
    background: rgba(220, 38, 38, 0.15) !important;
    color: #b91c1c !important;
    border-color: rgba(220, 38, 38, 0.3) !important;
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(220, 38, 38, 0.2);
}

.pboc .nav-chip.current {
    background: #dc2626 !important;
    color: #ffffff !important;
    border-color: #dc2626 !important;
}

/* ==========================================
   BACK ACTION CHIP (EMPHASIZED PARENT LINK)
   ========================================== */
.nav-chip.back-action {
    position: relative;
    padding-left: 1rem;
    font-weight: 600;
}

.nav-chip.back-action::before {
    content: "←";
    position: absolute;
    left: 0.35rem;
    font-weight: bold;
    opacity: 0.7;
    font-size: 0.9rem;
}

/* ==========================================
   SEPARATORS BETWEEN CHIPS
   ========================================== */
.breadcrumb-separator {
    color: #64748b;
    font-size: 1.2rem;
    opacity: 0.6;
    font-weight: 500;
    margin: 0 0.2rem;
    display: flex;
    align-items: center;
    line-height: 1;
}

/* ==========================================
   UTILITY ACTIONS (RIGHT SIDE) - Standard slim size
   ========================================== */
.breadcrumb-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.action-btn {
    background: transparent;
    border: 1px solid var(--border, #e5e7eb);
    color: var(--text-secondary, #6b7280);
    padding: 0.4rem;       /* Standard slim padding */
    border-radius: 6px;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;           /* Standard slim size */
    height: 32px;
    text-decoration: none;
    font-size: 0.9rem;
}

.action-btn:hover {
    background: var(--light, #f8f9fa);
    border-color: var(--primary, #2563eb);
    color: var(--primary, #2563eb);
}

/* ==========================================
   MOBILE RESPONSIVENESS
   ========================================== */
@media (max-width: 768px) {
    .nav-breadcrumb-hybrid {
        padding: 0.5rem 0;
    }
    
    .breadcrumb-content {
        flex-direction: column;
        align-items: stretch;
        gap: 0.5rem;
    }

    .breadcrumb-navigation {
        justify-content: center;
        flex-wrap: wrap;
        gap: 0.4rem;
    }

    .breadcrumb-actions {
        justify-content: center;
        border-top: 1px solid var(--border, #e5e7eb);
        padding-top: 0.5rem;
    }

    .nav-chip {
        font-size: 0.75rem;
        padding: 0.2rem 0.5rem;
        min-height: 24px;
    }

    .breadcrumb-separator {
        display: none;
    }

    .nav-chip.back-action::before {
        display: none;
    }

    .action-btn {
        width: 28px;
        height: 28px;
        font-size: 0.8rem;
    }
}

/* ==========================================
   TWO-DIMENSIONAL BREADCRUMB - PROPER ALIGNMENT
   ========================================== 

.breadcrumb-navigation.breadcrumb-2d {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

/* Row 1: Main navigation 
.breadcrumb-row-main {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* Row 2: Sub-navigation - must match Row 1 structure exactly 
.breadcrumb-row-sub {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
}

/* Container for each breadcrumb position (maintains width) 
.breadcrumb-position {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 0.3rem;
}

/* Vertical connector 
.breadcrumb-connector {
    color: #64748b;
    font-size: 1rem;
    opacity: 0.6;
    line-height: 1;
}

/* Sub-chip styling 
.nav-chip-sub {
    padding: 0.2rem 0.55rem;
    border-radius: 14px;
    font-size: 0.75rem;
    min-height: 24px;
    opacity: 0.95;
}

/* Spacer that matches width of parent chip 
.breadcrumb-spacer-match {
    visibility: hidden;
    height: 0;
}

/* Mobile responsive 
@media (max-width: 768px) {
    .breadcrumb-row-main,
    .breadcrumb-row-sub {
        flex-wrap: wrap;
        justify-content: center;
        gap: 0.4rem;
    }
    
    .breadcrumb-position {
        flex-direction: row;
        gap: 0.25rem;
    }
    
    .breadcrumb-connector {
        transform: rotate(-90deg);
        font-size: 0.9rem;
    }
    
    .nav-chip-sub {
        font-size: 0.7rem;
        padding: 0.15rem 0.45rem;
        min-height: 20px;
    }
    
    .breadcrumb-separator {
        display: none !important;
    }
}
    */