/* 統一ヘッダーナビゲーションスタイル */

/* 戻るボタンはTailwindCSSで定義済み（index.html内の@layer components） */

/* アクションボタンもTailwindCSSで定義済み（index.html内の@layer components） */

/* ナビゲーションボタンのホバー効果統一 */
.nav-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    background: transparent;
    border: 1px solid var(--border-default);
    color: var(--text-secondary);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.nav-btn:hover:not(:disabled) {
    background: var(--bg-elevated);
    border-color: var(--color-primary);
    color: var(--text-primary);
    transform: translateY(-1px);
}

.nav-btn:active {
    transform: translateY(0);
}

.nav-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    transform: none;
}

/* ヘッダー全体の統一スタイル */
.page-header, 
.image-detail-header,
.album-gallery-header,
.favorites-header,
.trash-header,
.tag-search-header {
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border-default);
    padding: 0.75rem 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

/* ヘッダーのトップ部分（戻るボタンとアクション） */
.header-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.header-navigation {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.header-actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

/* 画像カウンター */
.image-counter {
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
    font-weight: 500;
}

/* レスポンシブ対応 */
@media (max-width: 768px) {
    .page-header, 
    .image-detail-header,
    .album-gallery-header,
    .favorites-header,
    .trash-header,
    .tag-search-header {
        padding: 0.5rem 1rem;
        gap: 0.5rem;
    }
    
    .header-actions {
        gap: 0.5rem;
    }
    
    .nav-btn {
        width: 2rem;
        height: 2rem;
    }
    /* .action-btn のレスポンシブスタイルもTailwindCSSで管理 */
    
    /* .back-btn のレスポンシブスタイルもTailwindCSSで管理 */
}

/* 選択ボタンの統一スタイル */
.selection-btn {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    background: transparent;
    border: 1px solid var(--border-default);
    color: var(--text-secondary);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all var(--transition-fast);
    font-size: var(--font-size-sm);
    font-weight: 500;
    text-decoration: none;
}

.selection-btn:hover {
    background: var(--bg-elevated);
    border-color: var(--color-primary);
    color: var(--text-primary);
    transform: translateY(-1px);
}

.selection-btn:active {
    transform: translateY(0);
}

/* TagSearchPage専用のaction-btnスタイル */
.tag-search-header .action-btn {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    background: transparent;
    color: var(--text-primary);
    border: 1px solid var(--border-elevated);
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 0.85rem;
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
    min-width: fit-content;
    max-width: 160px;
    overflow: hidden;
    text-overflow: ellipsis;
    z-index: 1011;
}

.tag-search-header .action-btn:hover {
    background: var(--bg-elevated-alpha);
    border-color: var(--color-primary);
    transform: translateY(-1px);
}

.tag-search-header .action-btn.secondary {
    color: var(--text-primary);
    border-color: var(--border-default);
}

.tag-search-header .action-btn.secondary:hover {
    background: var(--bg-hover);
    border-color: var(--border-hover);
}