/**
 * CentralHub Shared Header Styles
 * Supplements themes.css with styles specific to the shared header component.
 * themes.css already defines .hub-header, .hub-context-bar, .hub-search-input, .bell-search, .doraemon-avatar
 */

/* ===== SPINNER ANIMATION ===== */
@keyframes sharedHeaderSpin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* ===== SEARCH RESULTS CONTAINER ===== */
#shared-header-search-results {
    font-family: var(--font-primary, 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif);
}

/* ===== DROPDOWN STYLES ===== */
.shared-header-dropdown {
    font-family: var(--font-primary, 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif);
    animation: sharedHeaderDropdownIn 0.15s ease-out;
}

@keyframes sharedHeaderDropdownIn {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ===== SOP BADGE LINK ===== */
.shared-header-sop-badge {
    transition: all 0.2s ease;
}

.shared-header-sop-badge:hover {
    text-decoration: none;
    transform: scale(1.02);
}

/* ===== RESPONSIVE SEARCH BAR ===== */
@media (max-width: 768px) {
    #shared-header .bell-search,
    #shared-header > div > div:nth-child(2) {
        display: none !important;
    }
}

/* ===== RESULT ROW HOVER ===== */
.shared-header-result-row a:hover {
    text-decoration: none;
}

/* ===== BODY TRANSITION FOR THEME ===== */
body {
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* ===== SCROLLBAR FOR SEARCH RESULTS ===== */
#shared-header-search-results::-webkit-scrollbar {
    width: 6px;
}

#shared-header-search-results::-webkit-scrollbar-track {
    background: transparent;
}

#shared-header-search-results::-webkit-scrollbar-thumb {
    background: var(--scrollbar-thumb, #ccc);
    border-radius: 3px;
}

/* ===== PRINT: HIDE HEADER ===== */
@media print {
    #shared-header,
    #shared-context-bar,
    #shared-header-search-results {
        display: none !important;
    }
    body {
        padding-top: 0 !important;
    }
}