/* Complete Header Component Styles */

.app-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    /* Floating Header Effect - Circular Gradient */
    background: radial-gradient(circle, var(--brand-primary, #064ea7) 0%, color-mix(in srgb, var(--brand-primary, #064ea7) 30%, #000000) 100%);
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: white;
    padding: 0.75rem 1.5rem;
    /* Slightly more padding */
    min-height: 60px;
    position: fixed;
    top: 1rem;
    /* Floating from top */
    left: 1rem;
    /* Floating from left */
    right: 1rem;
    /* Floating from right */
    width: auto;
    /* Allow it to shrink to margins */
    border-radius: 12px;
    /* Rounded corners */
    z-index: 1000;
}

/* Header Sections */
.header-section {
    display: flex;
    align-items: center;
}

.header-left {
    flex: 1;
    justify-content: flex-start;
    min-width: 0;
}

.header-center {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    pointer-events: none;
    /* Allow clicks to pass through to elements below */
    max-width: 40%;
    /* Prevent overlap with left/right sections */
}

.header-center * {
    pointer-events: auto;
    /* Re-enable pointer events for child elements */
}

.header-right {
    flex: 1;
    justify-content: flex-end;
}

/* Left: Branding */
.header-branding {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-width: 0;
}

.header-branding .company-logo {
    width: 32px;
    height: 32px;
    object-fit: contain;
    flex-shrink: 0;
    background: white;
    border-radius: 50%;
    padding: 3px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.header-branding-text {
    display: flex;
    flex-direction: column;
    line-height: 1.1;
    min-width: 0;
}

.header-branding-text .company-name {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--brand-accent, var(--gold, #ffd600));
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.header-branding-text .company-slogan {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.85);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Hide slogan when empty */
.header-branding-text .company-slogan:empty {
    display: none;
}

/* Center: Display Point Name */
.display-point-name {
    margin: 0;
    font-size: 1.3rem;
    font-weight: 400;
    color: white;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

/* Right: Controls */
.header-controls-group {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.header-info {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.8);
    gap: 0.25rem;
}

.header-info>div {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.header-info .info-value {
    font-weight: bold;
    color: var(--brand-accent, var(--gold, #ffd600));
}

.header-setup-btn {
    background: var(--brand-accent, var(--gold, #ffd600));
    border: none;
    color: var(--brand-primary, var(--navy, #064ea7));
    border-radius: 3px;
    font-weight: bold;
    font-size: 1rem;
    cursor: pointer;
    padding: 8px 12px;
    flex-shrink: 0;
    min-width: 40px;
    transition: all 0.3s ease;
}

.header-setup-btn:hover {
    filter: brightness(1.1);
    transform: scale(1.05);
}

.header-setup-btn:active {
    transform: scale(0.95);
}

/* Hide info divs when they have display: none */
#hubInfo[style*="display: none"],
#dpInfo[style*="display: none"] {
    display: none !important;
}

/* Mobile responsive adjustments */
@media (max-width: 768px) {
    .app-header {
        padding: 0.5rem 0.5rem;
        /* Reduced padding for tighter corner fit */
        min-height: auto;
        flex-wrap: wrap;
        gap: 0.5rem;
        justify-content: flex-start;
        /* Force left alignment */
    }

    .header-left {
        order: 1;
        flex: 1;
        min-width: auto;
        justify-content: flex-start;
        /* Ensure branding aligns left */
        text-align: left;
    }

    .header-right {
        order: 2;
        flex: 0 0 auto;
        /* Right section is effectively empty/handled by absolute positioning now */
    }

    /* Move center section to a new row on mobile if needed or just keep it compact */
    .header-center {
        order: 3;
        position: static;
        transform: none;
        width: 100%;
        max-width: 100%;
        margin-top: 0.25rem;
        border-top: 1px solid rgba(255, 255, 255, 0.1);
        padding-top: 0.25rem;
        /* Keep display name centered as it's a separate row, or align left if desired. 
           User specifically said "Logo and text", implying branding. 
           If they meant DP name, we can change this too. keeping center for DP name usually looks better. */
    }

    /* Ensure center content is visible and clickable */
    .header-center {
        pointer-events: auto;
    }

    .header-branding {
        gap: 0.5rem;
        justify-content: flex-start;
        width: 100%;
    }

    .header-branding .company-logo {
        width: 40px;
        /* Slightly larger for visibility */
        height: 40px;
    }

    .header-branding-text .company-name {
        font-size: 1.1rem;
        line-height: 1.2;
    }

    .header-branding-text .company-slogan {
        font-size: 0.75rem;
        display: block;
        /* Ensure slogan is visible */
        max-width: 200px;
        white-space: normal;
        /* Allow wrapping */
    }

    .display-point-name {
        font-size: 1rem;
        opacity: 0.9;
    }

    .header-info {
        display: flex !important;
        position: absolute;
        top: 0.5rem;
        right: 60px;
        /* Position to the left of the settings button */
        flex-direction: column;
        align-items: flex-end;
        z-index: 1001;
        /* Above normal content but below settings button */
        font-size: 0.7rem;
        padding-right: 0;
    }

    .header-info>div {
        background: rgba(0, 0, 0, 0.2);
        padding: 1px 6px;
        /* Reduced vertical padding */
        border-radius: 4px;
        margin-bottom: 1px;
        /* Tighter spacing */
        line-height: 1.1;
    }

    /* Position settings button absolutely in top right to guarantee placement */
    .header-setup-btn {
        position: absolute;
        top: 0.5rem;
        right: 0.5rem;
        margin: 0;
        padding: 8px;
        /* Larger padding */
        width: 44px;
        /* Larger touch target */
        height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.5rem;
        /* Larger icon */
        cursor: pointer;
        z-index: 2000;
        /* Ensure it's above other elements */
    }

    /* Ensure app header is fixed for positioning context and preventing gap */
    .app-header {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
    }

    .header-controls-group {
        gap: 0.5rem;
    }
}

/* Extra small screens */
@media (max-width: 480px) {
    .header-branding-text .company-name {
        font-size: 1rem;
    }

    .header-branding .company-logo {
        width: 32px;
        height: 32px;
    }

    .header-setup-btn {
        width: 30px;
        height: 30px;
    }
}

/* Dark mode support */
body.dark .app-header {
    background: color-mix(in srgb, var(--brand-primary, #064ea7) 70%, #000);
}

body.dark .header-setup-btn {
    background: var(--brand-accent, var(--gold, #ffd600));
    color: var(--brand-primary, var(--navy, #064ea7));
}