/* Portrait Mode Header Fix for iPad and similar devices */
/* This fixes overlapping elements in the header when in portrait orientation */

/* Portrait mode detection - primarily for tablets */
@media screen and (orientation: portrait) and (min-width: 481px) and (max-width: 1024px) {
    /* Main header adjustments */
    .header {
        padding: 8px 12px;
        min-height: 56px;
        height: auto;
    }
    
    .header-content {
        display: flex;
        align-items: center;
        gap: 8px;
        flex-wrap: nowrap;
        justify-content: space-between;
        width: 100%;
    }
    
    /* Hide logo to save space */
    .header:not(.hidden) .header-content .logo {
        display: none;
    }
    
    /* Search container adjustments */
    .header:not(.hidden) .search-container {
        flex: 1;
        max-width: none;
        margin: 0;
        min-width: 0;
        order: 1;
    }
    
    /* Ensure search input group doesn't overflow */
    .header:not(.hidden) .search-input-group {
        width: 100%;
        display: flex;
        align-items: center;
        gap: 4px;
    }
    
    /* Adjust search input */
    .header:not(.hidden) .search-input {
        flex: 1;
        min-width: 0;
        padding: 10px 8px;
        font-size: 14px;
    }
    
    /* Compact search button */
    .header:not(.hidden) .search-button {
        width: 36px;
        height: 36px;
        padding: 0;
        flex-shrink: 0;
    }
    
    .header:not(.hidden) .search-button svg {
        width: 20px;
        height: 20px;
    }
    
    /* Import button adjustments */
    .header:not(.hidden) .import-button-header {
        width: 36px;
        height: 36px;
        padding: 8px;
        margin: 0;
        flex-shrink: 0;
    }
    
    .header:not(.hidden) .import-button-header svg {
        width: 18px;
        height: 18px;
    }
    
    /* Add Instance button - compact version */
    .header:not(.hidden) .add-instance-btn {
        padding: 8px 12px;
        font-size: 11px;
        height: 36px;
        min-width: auto;
        white-space: nowrap;
        flex-shrink: 0;
        order: 2;
        margin: 0;
        gap: 4px;
    }
    
    .header:not(.hidden) .add-instance-btn svg {
        width: 14px;
        height: 14px;
        margin: 0;
    }
    
    .header:not(.hidden) .add-instance-btn span {
        font-size: 11px;
        letter-spacing: 0.3px;
    }
    
    /* User menu container adjustments */
    .header:not(.hidden) .user-menu-container {
        order: 3;
        flex-shrink: 0;
        margin-left: 4px;
    }
    
    /* Compact user menu trigger */
    .header:not(.hidden) .user-menu-trigger {
        padding: 6px 8px;
        height: 36px;
        gap: 4px;
    }
    
    .header:not(.hidden) .user-name {
        display: none; /* Hide username to save space */
    }
    
    .header:not(.hidden) .dropdown-arrow {
        display: none; /* Hide dropdown arrow */
    }
    
    .header:not(.hidden) .user-avatar {
        width: 24px;
        height: 24px;
        font-size: 12px;
    }
    
    /* Compact sign-in button */
    .header:not(.hidden) .sign-in-btn {
        padding: 8px 12px;
        font-size: 12px;
        height: 36px;
    }
}

/* Narrower portrait screens (phones and small tablets) */
@media screen and (orientation: portrait) and (max-width: 480px) {
    .header:not(.hidden) .add-instance-btn {
        width: 36px;
        height: 36px;
        padding: 8px;
        border-radius: 4px;
        justify-content: center;
    }
    
    .header:not(.hidden) .add-instance-btn span {
        display: none;
    }
    
    .header:not(.hidden) .add-instance-btn svg {
        margin: 0;
        width: 16px;
        height: 16px;
    }
    
    .header:not(.hidden) .search-container {
        max-width: calc(100% - 120px); /* Leave room for buttons */
    }
}

/* iPad Pro specific adjustments */
@media screen and (orientation: portrait) and (min-width: 768px) and (max-width: 1024px) {
    .header-content {
        max-width: 100%;
        padding: 0;
    }
    
    .header:not(.hidden) .search-container {
        max-width: calc(100% - 200px); /* More room for larger screen */
    }
    
    .header:not(.hidden) .add-instance-btn {
        padding: 8px 16px;
    }
    
    .header:not(.hidden) .add-instance-btn span {
        display: inline; /* Show text on larger iPads */
    }
}

/* Ensure proper stacking context */
@media screen and (orientation: portrait) {
    .header {
        z-index: 100;
    }
    
    .header-content > * {
        position: relative;
        z-index: 1;
    }
    
    /* Prevent any absolute positioned elements from overlapping */
    .header-content .logo,
    .header-content .search-container,
    .header-content .add-instance-btn,
    .header-content .user-menu-container,
    .header-content .import-button-header {
        position: relative !important;
        left: auto !important;
        right: auto !important;
        top: auto !important;
        bottom: auto !important;
    }
}

/* Landing page portrait adjustments */
@media screen and (orientation: portrait) and (max-width: 1024px) {
    .landing-auth-menu {
        top: 10px;
        right: 10px;
        gap: 8px;
        flex-wrap: wrap;
        max-width: calc(100% - 20px);
        justify-content: flex-end;
    }
    
    .landing-auth-menu .import-button-top {
        padding: 8px 12px;
        font-size: 12px;
        height: 32px;
    }
    
    .landing-auth-menu .import-button-top span {
        font-size: 11px;
    }
    
    .landing-auth-menu .sign-in-btn {
        padding: 8px 12px;
        font-size: 12px;
        height: 32px;
    }
}

/* Fix for potential flex container issues */
@media screen and (orientation: portrait) and (max-width: 1024px) {
    /* Ensure flexbox properties are properly set */
    .header-content {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        justify-content: space-between !important;
    }
    
    /* Remove any conflicting styles */
    .header-contracted .header-content .logo {
        position: relative !important;
        left: auto !important;
    }
}

/* Additional safety rules to prevent overlap */
@media screen and (orientation: portrait) {
    /* Ensure no element uses absolute positioning in header */
    .header * {
        position: relative !important;
    }
    
    /* Exception for dropdowns which need absolute positioning */
    .user-dropdown {
        position: absolute !important;
    }
    
    /* Ensure proper text truncation */
    .header .search-input::placeholder {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}