/* ==============================================================================
   HassleFreebooks — App Header Styles
   ==============================================================================
   Purpose: Enhanced styles for the application header bar with improved semantic
   structure, responsive design, accessibility, and visual polish.

   Features:
   1. Semantic HTML5 structure with proper nav elements
   2. Responsive mobile menu with smooth animations
   3. User dropdown menu with avatar display
   4. Entity status indicator with lock badge
   5. Smooth transitions and hover effects
   6. Full accessibility support with ARIA
   7. Mobile-first responsive design

   Author: UI Enhancement Implementation
   Date: February 2026
   ============================================================================== */

/* ==============================================================================
   APP HEADER BASE STYLES
   ============================================================================== */

.app-header {
    position: sticky;
    top: 0;
    z-index: 1000;
    /* Frosted-glass surface: translucent warm white matching Notion/Linear aesthetics */
    background-color: rgba(250, 249, 247, 0.92);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--color-border, #e5e7eb);
    /* No shadow by default; shadow is added by .is-scrolled state via JS */
    box-shadow: none;
    transition: box-shadow 150ms ease, border-color 150ms ease;
}

/* Applied by JS (scroll event) to indicate the page has scrolled beneath the header */
.app-header.is-scrolled {
    box-shadow: 0 1px 3px rgba(55, 53, 47, 0.08), 0 1px 2px rgba(55, 53, 47, 0.04);
    border-bottom-color: transparent;
}

.app-header__container {
    width: 100%;
}

.app-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    /* 60px height and 1200px cap match the tighter Notion/Linear header proportions */
    height: 60px;
    padding: 0 1.5rem;
    max-width: 1200px;
    margin: 0 auto;
}

/* ==============================================================================
   BRAND/LOGO SECTION
   ============================================================================== */

.app-header__left {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
}

.app-header__brand {
    display: flex;
    align-items: center;
    gap: var(--space-3, 0.75rem);
    text-decoration: none;
    /* Compact brand: 1rem at 600-weight with tight tracking matches Notion/Linear wordmarks */
    color: var(--color-text, #111827);
    font-weight: 600;
    font-size: 1rem;
    letter-spacing: -0.02em;
    transition: all var(--transition-fast, 150ms ease-in-out);
}

.app-header__brand:hover {
    color: var(--color-primary, #3b82f6);
    text-decoration: none;
    transform: translateX(2px);
}

.app-header__logo {
    font-size: 1.5rem;
    filter: grayscale(0.2);
    transition: filter var(--transition-fast, 150ms ease-in-out);
}

.app-header__brand:hover .app-header__logo {
    filter: grayscale(0);
}

.app-header__brand-text {
    letter-spacing: -0.025em;
}

/* ==============================================================================
   CENTER SECTION (ENTITY STATUS)
   ============================================================================== */

.app-header__center {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 var(--space-4, 1rem);
}

.app-header__entity-wrapper {
    display: flex;
    align-items: center;
    gap: var(--space-2, 0.5rem);
    padding: var(--space-2, 0.5rem) var(--space-4, 1rem);
    background: var(--color-gray-50, #f9fafb);
    border: 1px solid var(--color-gray-200, #e5e7eb);
    border-radius: var(--radius-full, 9999px);
    font-size: var(--font-size-sm, 0.875rem);
}

.app-header__entity-label {
    color: var(--color-gray-600, #4b5563);
    font-weight: var(--font-weight-medium, 500);
}

.app-header__entity-name {
    color: var(--color-gray-900, #111827);
    font-weight: var(--font-weight-semibold, 600);
}

.app-header__lock-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1, 0.25rem);
    padding: var(--space-1, 0.25rem) var(--space-3, 0.75rem);
    background: var(--color-warning, #f59e0b);
    color: var(--color-white, #ffffff);
    border-radius: var(--radius-full, 9999px);
    font-size: var(--font-size-xs, 0.75rem);
    font-weight: var(--font-weight-medium, 500);
    text-decoration: none;
    transition: all var(--transition-fast, 150ms ease-in-out);
}

.app-header__lock-badge:hover {
    background: var(--color-warning-dark, #d97706);
    transform: scale(1.05);
    box-shadow: 0 2px 4px rgba(245, 158, 11, 0.3);
}

.app-header__lock-icon {
    flex-shrink: 0;
}

/* ==============================================================================
   NAVIGATION SECTION (RIGHT)
   ============================================================================== */

.app-header__right {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
}

.app-header__nav-desktop {
    display: flex;
    align-items: center;
    gap: var(--space-2, 0.5rem);
}

.app-header__link {
    display: flex;
    align-items: center;
    /* Smaller, tighter nav links consistent with Notion/Linear density */
    padding: 0.375rem 0.625rem;
    color: var(--color-text-secondary, #374151);
    text-decoration: none;
    font-size: 0.875rem;
    font-weight: 500;
    border-radius: var(--radius-md, var(--radius-base, 0.375rem));
    transition: all var(--transition-fast, 150ms ease-in-out);
}

.app-header__link:hover {
    /* Promote to full text color with a subtle surface tint on hover */
    color: var(--color-text, #111827);
    background-color: var(--color-surface-hover, var(--color-gray-100, #f3f4f6));
}

.app-header__link:focus-visible {
    outline: 2px solid var(--color-primary, #3b82f6);
    outline-offset: 2px;
}

/* ==============================================================================
   USER MENU DROPDOWN
   ============================================================================== */

.app-header__user-menu {
    position: relative;
    margin-left: var(--space-3, 0.75rem);
}

.app-header__user-trigger {
    display: flex;
    align-items: center;
    gap: var(--space-2, 0.5rem);
    padding: var(--space-2, 0.5rem) var(--space-3, 0.75rem);
    background: transparent;
    border: 1px solid var(--color-gray-300, #d1d5db);
    border-radius: var(--radius-full, 9999px);
    font-family: inherit;
    font-size: var(--font-size-base, 1rem);
    font-weight: var(--font-weight-medium, 500);
    color: var(--color-gray-700, #374151);
    cursor: pointer;
    transition: all var(--transition-fast, 150ms ease-in-out);
}

.app-header__user-trigger:hover {
    background: var(--color-gray-50, #f9fafb);
    border-color: var(--color-gray-400, #9ca3af);
}

.app-header__user-trigger[aria-expanded="true"] {
    background: var(--color-gray-100, #f3f4f6);
    border-color: var(--color-primary, #3b82f6);
}

.app-header__user-avatar {
    display: flex;
    align-items: center;
    justify-content: center;
    /* Explicit 32×32 with 50% radius so any <img> or initials-div renders as a circle */
    width: 32px;
    height: 32px;
    background: var(--color-primary, #3b82f6);
    color: var(--color-white, #ffffff);
    border-radius: 50%;
    font-size: var(--font-size-sm, 0.875rem);
    font-weight: var(--font-weight-semibold, 600);
    flex-shrink: 0;
}

.app-header__user-avatar--large {
    width: 48px;
    height: 48px;
    font-size: var(--font-size-lg, 1.125rem);
}

.app-header__user-name {
    max-width: 150px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.app-header__dropdown-icon {
    margin-left: var(--space-1, 0.25rem);
    transition: transform var(--transition-fast, 150ms ease-in-out);
}

.app-header__user-trigger[aria-expanded="true"] .app-header__dropdown-icon {
    transform: rotate(180deg);
}

/* Dropdown Menu */
.app-header__dropdown {
    position: absolute;
    top: calc(100% + var(--space-2, 0.5rem));
    right: 0;
    min-width: 280px;
    /* Surface/border/shadow tokens from design-tokens.css handle light+dark automatically */
    background: var(--color-surface, #ffffff);
    border: 1px solid var(--color-border, #e5e7eb);
    border-radius: var(--radius-lg, 0.5rem);
    box-shadow: var(--shadow-lg, 0 10px 15px -3px rgba(0, 0, 0, 0.1));
    overflow: hidden;
    opacity: 0;
    transform: translateY(-10px);
    transition: all var(--transition-fast, 150ms ease-in-out);
    pointer-events: none;
}

.app-header__dropdown:not([hidden]) {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.app-header__dropdown-header {
    padding: var(--space-4, 1rem);
    background: var(--color-gray-50, #f9fafb);
    border-bottom: 1px solid var(--color-gray-200, #e5e7eb);
}

.app-header__user-info {
    display: flex;
    align-items: center;
    gap: var(--space-3, 0.75rem);
}

.app-header__user-details {
    flex: 1;
    min-width: 0;
}

.app-header__user-name-full {
    display: block;
    font-weight: var(--font-weight-semibold, 600);
    color: var(--color-gray-900, #111827);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.app-header__user-email {
    display: block;
    font-size: var(--font-size-sm, 0.875rem);
    color: var(--color-gray-600, #4b5563);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.app-header__dropdown-menu {
    list-style: none;
    margin: 0;
    padding: var(--space-2, 0.5rem);
}

.app-header__dropdown-link {
    display: flex;
    align-items: center;
    gap: var(--space-3, 0.75rem);
    width: 100%;
    padding: var(--space-2, 0.5rem) var(--space-3, 0.75rem);
    color: var(--color-gray-700, #374151);
    text-decoration: none;
    border-radius: var(--radius-base, 0.375rem);
    transition: all var(--transition-fast, 150ms ease-in-out);
}

.app-header__dropdown-link:hover {
    background: var(--color-gray-100, #f3f4f6);
    color: var(--color-gray-900, #111827);
}

.app-header__dropdown-link:focus-visible {
    outline: 2px solid var(--color-primary, #3b82f6);
    outline-offset: -2px;
}

.app-header__dropdown-link--danger {
    color: var(--color-danger, #ef4444);
}

.app-header__dropdown-link--danger:hover {
    background: var(--color-danger-alpha, rgba(239, 68, 68, 0.1));
    color: var(--color-danger-dark, #dc2626);
}

.app-header__dropdown-icon-left {
    flex-shrink: 0;
    color: var(--color-gray-500, #6b7280);
}

.app-header__dropdown-divider {
    height: 1px;
    background: var(--color-gray-200, #e5e7eb);
    margin: var(--space-2, 0.5rem) 0;
}

/* ==============================================================================
   MOBILE STYLES
   ============================================================================== */

.app-header__mobile-toggle {
    /* Hidden on desktop by default; only shown inside the max-width: 767px query below.
       !important used on display:flex there to guard against specificity conflicts. */
    display: none !important;
    position: relative;
    width: 44px;
    height: 44px;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: var(--radius-base, 0.375rem);
    cursor: pointer;
    transition: all var(--transition-fast, 150ms ease-in-out);
}

.app-header__mobile-toggle:hover {
    background: var(--color-gray-100, #f3f4f6);
}

.app-header__hamburger {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 24px;
    height: 24px;
    margin: 0 auto;
}

.app-header__hamburger-line {
    position: absolute;
    width: 20px;
    height: 2px;
    background: var(--color-gray-700, #374151);
    border-radius: 2px;
    transition: all var(--transition-fast, 150ms ease-in-out);
}

.app-header__hamburger-line:nth-child(1) {
    transform: translateY(-6px);
}

.app-header__hamburger-line:nth-child(2) {
    transform: translateY(0);
}

.app-header__hamburger-line:nth-child(3) {
    transform: translateY(6px);
}

/* Hamburger animation */
.app-header__mobile-toggle--active .app-header__hamburger-line:nth-child(1) {
    transform: translateY(0) rotate(45deg);
}

.app-header__mobile-toggle--active .app-header__hamburger-line:nth-child(2) {
    opacity: 0;
}

.app-header__mobile-toggle--active .app-header__hamburger-line:nth-child(3) {
    transform: translateY(0) rotate(-45deg);
}

/* Mobile Navigation Drawer */
.app-header__mobile-nav {
    position: fixed;
    top: 64px;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--color-white, #ffffff);
    border-top: 1px solid var(--color-gray-200, #e5e7eb);
    z-index: 999;
    overflow-y: auto;
    transform: translateX(-100%);
    transition: transform var(--transition-base, 200ms ease-in-out);
}

.app-header__mobile-nav:not([hidden]) {
    transform: translateX(0);
}

.app-header__mobile-user {
    display: flex;
    align-items: center;
    gap: var(--space-4, 1rem);
    padding: var(--space-6, 1.5rem);
    background: var(--color-gray-50, #f9fafb);
    border-bottom: 1px solid var(--color-gray-200, #e5e7eb);
}

.app-header__mobile-menu {
    list-style: none;
    margin: 0;
    padding: var(--space-4, 1rem);
}

.app-header__mobile-link {
    display: block;
    padding: var(--space-3, 0.75rem) var(--space-4, 1rem);
    color: var(--color-gray-700, #374151);
    text-decoration: none;
    font-size: var(--font-size-base, 1rem);
    font-weight: var(--font-weight-medium, 500);
    border-radius: var(--radius-base, 0.375rem);
    transition: all var(--transition-fast, 150ms ease-in-out);
}

.app-header__mobile-link:hover {
    background: var(--color-gray-100, #f3f4f6);
    color: var(--color-gray-900, #111827);
}

.app-header__mobile-link--danger {
    color: var(--color-danger, #ef4444);
}

.app-header__mobile-link--danger:hover {
    background: var(--color-danger-alpha, rgba(239, 68, 68, 0.1));
    color: var(--color-danger-dark, #dc2626);
}

.app-header__mobile-divider {
    height: 1px;
    background: var(--color-gray-200, #e5e7eb);
    margin: var(--space-3, 0.75rem) 0;
}

/* ==============================================================================
   RESPONSIVE BREAKPOINTS
   ============================================================================== */

@media (max-width: 767px) {
    .app-header__inner {
        padding: 0 var(--space-4, 1rem);
    }

    .app-header__center {
        display: none;
    }

    .app-header__nav-desktop {
        display: none;
    }

    /* Override the default display:none !important set on the base rule above */
    .app-header__mobile-toggle {
        display: flex !important;
    }

    .app-header__brand-text {
        font-size: var(--font-size-base, 1rem);
    }
}

@media (max-width: 480px) {
    .app-header__inner {
        height: 56px;
    }

    .app-header__mobile-nav {
        top: 56px;
    }

    .app-header__logo {
        font-size: 1.25rem;
    }
}

/* Dark mode for this component is handled automatically via CSS variable
   overrides in design-tokens.css — no manual body.theme-dark rules needed here. */

/* ==============================================================================
   PRINT STYLES
   ============================================================================== */

@media print {
    .app-header {
        position: static;
        box-shadow: none;
        border-bottom: 2px solid #000;
    }

    .app-header__mobile-toggle,
    .app-header__dropdown,
    .app-header__mobile-nav {
        display: none !important;
    }
}

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

/* High contrast mode */
@media (prefers-contrast: high) {
    .app-header {
        border-bottom-width: 2px;
    }

    .app-header__user-trigger,
    .app-header__dropdown {
        border-width: 2px;
    }

    .app-header__link:focus-visible,
    .app-header__dropdown-link:focus-visible {
        outline-width: 3px;
    }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .app-header,
    .app-header__dropdown,
    .app-header__mobile-nav,
    .app-header__hamburger-line {
        transition-duration: 0.01ms !important;
    }
}

/* ==============================================================================
   BODY PADDING ADJUSTMENT
   ============================================================================== */

/* Header is sticky — no body padding needed (content flows naturally below it) */

/* ==============================================================================
   END OF APP HEADER STYLES
   ============================================================================== */