/* ==============================================
   Anima WebUI - Theme Toggle
   ============================================== */

/* ── Header Icon Buttons (Tutorial, etc.) ── */
.header-icon-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-sm);
    background: var(--bg-input);
    color: var(--text-secondary);
    cursor: pointer;
    transition: all var(--transition-fast);
    flex-shrink: 0;
}

.header-icon-btn:hover {
    border-color: var(--accent-primary);
    color: var(--accent-secondary);
    background: rgba(var(--accent-primary-rgb), 0.08);
}

.header-icon-btn:active {
    transform: scale(0.92);
}

.header-icon-btn.active {
    border-color: var(--accent-primary);
    color: var(--accent-primary);
    background: rgba(var(--accent-primary-rgb), 0.12);
}

/* ── Toggle Button ── */
.theme-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-sm);
    background: var(--bg-input);
    color: var(--text-secondary);
    cursor: pointer;
    transition: all var(--transition-fast);
    flex-shrink: 0;
    position: relative;
    overflow: hidden;
}

.theme-toggle:hover {
    border-color: var(--accent-primary);
    color: var(--accent-secondary);
    background: rgba(var(--accent-primary-rgb), 0.08);
}

.theme-toggle:active {
    transform: scale(0.92);
}

/* ── Icons ── */
.theme-toggle-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1),
        opacity 0.3s ease;
}

.theme-toggle .icon-sun,
.theme-toggle .icon-moon {
    position: absolute;
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1),
        opacity 0.3s ease;
}

/* Dark theme: show moon, hide sun */
.theme-toggle .icon-sun {
    opacity: 0;
    transform: rotate(-90deg) scale(0.5);
}

.theme-toggle .icon-moon {
    opacity: 1;
    transform: rotate(0deg) scale(1);
}

/* Light theme: show sun, hide moon */
[data-theme="light"] .theme-toggle .icon-sun {
    opacity: 1;
    transform: rotate(0deg) scale(1);
}

[data-theme="light"] .theme-toggle .icon-moon {
    opacity: 0;
    transform: rotate(90deg) scale(0.5);
}

/* ==============================================
   Light Theme - Component Overrides
   ============================================== */

/* ── Gallery: ライトボックス系は常にダーク背景のままでOK ── */

/* ── Scrollbars: ライトテーマ ── */
[data-theme="light"] .layout-prompts::-webkit-scrollbar-thumb,
[data-theme="light"] .layout-gallery-strip::-webkit-scrollbar-thumb {
    background: var(--scrollbar-thumb);
}

[data-theme="light"] .layout-prompts::-webkit-scrollbar-thumb:hover,
[data-theme="light"] .layout-gallery-strip::-webkit-scrollbar-thumb:hover {
    background: var(--scrollbar-thumb-hover);
}

[data-theme="light"] .history-strip::-webkit-scrollbar-thumb {
    background: var(--scrollbar-thumb);
}

/* ── Gallery sort active button: ウォームカラー ── */
[data-theme="light"] .gallery-sort-btn.active {
    color: #fff;
    background: #e8985a;
}

/* ── Generate button: A1111風ウォームオレンジ ── */
[data-theme="light"] .generate-btn {
    color: #fff;
    background: linear-gradient(135deg, #f0a050, #e8985a);
    box-shadow: 0 2px 8px rgba(232, 152, 90, 0.25);
}

[data-theme="light"] .generate-btn:hover {
    box-shadow: 0 4px 16px rgba(232, 152, 90, 0.35);
    background: linear-gradient(135deg, #f5ad60, #ec9d5e);
}

[data-theme="light"] .generate-btn:disabled {
    background: linear-gradient(135deg, #d4c0a8, #c8b8a0);
    box-shadow: none;
}

/* ── Generate button shimmer: ライトテーマ */
[data-theme="light"] .generate-btn::before {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.25), transparent);
}

/* ── Mobile bottom bar: ライトテーマ ── */
[data-theme="light"] .mobile-generate-btn {
    background: linear-gradient(135deg, #f0a050, #e8985a);
    box-shadow: 0 2px 8px rgba(232, 152, 90, 0.25);
}

[data-theme="light"] .mobile-generate-btn:active {
    box-shadow: 0 1px 4px rgba(232, 152, 90, 0.2);
}

[data-theme="light"] .mobile-generate-btn.generating {
    background: linear-gradient(135deg, #c8b8a0, #bfae98);
}

[data-theme="light"] .mobile-palette-btn {
    background: #f5f5f0;
    border-color: #d8d8d2;
    color: #4a4a5a;
}

[data-theme="light"] .mobile-palette-btn:active {
    background: #eeeee8;
}

[data-theme="light"] .mobile-bottom-bar {
    background: #fafaf8;
    border-top-color: #e0e0d8;
    box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.06);
}

/* ── Header active tab: ウォームオレンジ ── */
[data-theme="light"] .header-tab.active {
    color: #fff;
    background: linear-gradient(135deg, #e8985a, #d88a4e);
}

/* ── Gallery card model badge: ダーク背景上なので白系維持 ── */
[data-theme="light"] .gallery-card-model {
    color: rgba(255, 255, 255, 0.8);
    background: rgba(0, 0, 0, 0.35);
}

/* ── Accordion badge: ライトテーマ調整 ── */
[data-theme="light"] .accordion-badge {
    background: rgba(232, 152, 90, 0.12);
    color: #c07838;
}

/* ── Icon button hover: ライトテーマ調整 ── */
[data-theme="light"] .icon-btn:hover {
    background: rgba(0, 0, 0, 0.04);
}

/* ── Simple Lightbox: 常にダーク ── */
[data-theme="light"] .simple-lightbox .lightbox-close {
    background: rgba(0, 0, 0, 0.4);
    color: #fff;
}

[data-theme="light"] .simple-lightbox .lightbox-close:hover {
    background: rgba(0, 0, 0, 0.6);
}

/* ── Gallery Lightbox: ライトテーマ包括修正 ── */

/* 画像表示エリアは常にダークで見やすく */
[data-theme="light"] .lightbox-image-area {
    background: #1a1a22;
}

/* close ボタン: ダーク背景上なので白系維持 */
[data-theme="light"] .lightbox-close {
    background: rgba(0, 0, 0, 0.5);
    color: #fff;
}

[data-theme="light"] .lightbox-close:hover {
    background: rgba(0, 0, 0, 0.7);
}

/* Info パネル内 prompt 表示 */
[data-theme="light"] .lightbox-prompt {
    background: #eeeee8;
    border-color: rgba(0, 0, 0, 0.08);
    color: var(--text-primary);
}

/* パラメータ表示欄 */
[data-theme="light"] .lightbox-param {
    background: #eeeee8;
    border-color: rgba(0, 0, 0, 0.06);
}

/* コピーボタン */
[data-theme="light"] .lightbox-copy-btn {
    background: #eeeee8;
    border-color: rgba(0, 0, 0, 0.1);
}

[data-theme="light"] .lightbox-copy-btn:hover {
    border-color: var(--accent-primary);
    color: var(--accent-primary);
}

/* アクションボタン */
[data-theme="light"] .lightbox-action-btn {
    background: #eeeee8;
    border-color: rgba(0, 0, 0, 0.08);
}

[data-theme="light"] .lightbox-action-btn:hover {
    background: rgba(0, 0, 0, 0.06);
    border-color: var(--accent-primary);
}

/* Preset popup: ライトテーマ shadow */
[data-theme="light"] .preset-popup {
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15), 0 0 0 1px var(--border-subtle);
}

/* Lightbox content: ライトテーマ shadow */
[data-theme="light"] .lightbox-content {
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.2);
}

/* ── Auth card: ライトテーマ shadow ── */
[data-theme="light"] .auth-card {
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.15);
}

/* ── Gallery card hover: ライトテーマ ── */
[data-theme="light"] .gallery-card:hover {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

/* ── Spinner: ライトテーマ (ウォーム) ── */
[data-theme="light"] .spinner {
    border-color: rgba(232, 152, 90, 0.2);
    border-top-color: #e8985a;
}

/* ── Section color dots: ライトテーマで少し落ち着いた色に ── */
[data-theme="light"] .section-color--quality {
    background: #4a9eda;
}

[data-theme="light"] .section-color--character {
    background: #d45e8a;
}

[data-theme="light"] .section-color--tags {
    background: #45b080;
}

[data-theme="light"] .section-color--situation {
    background: #7c5fbf;
}

[data-theme="light"] .section-color--background {
    background: #d08030;
}

[data-theme="light"] .section-color--natural {
    background: #c0883a;
}

/* ── Translate button: ウォームカラー ── */
[data-theme="light"] .translate-btn:hover {
    border-color: #e8985a;
    color: #c07838;
}

/* ── Slider: A1111風ニュートラルグレー ── */
[data-theme="light"] .control-slider {
    background: #d8d8d5;
}

[data-theme="light"] .control-slider::-webkit-slider-thumb {
    background: #999;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

[data-theme="light"] .control-slider::-webkit-slider-thumb:hover {
    background: #888;
}

[data-theme="light"] .control-slider::-moz-range-thumb {
    background: #999;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

/* ── Input focus border: ウォームカラー ── */
[data-theme="light"] .control-input:focus,
[data-theme="light"] .control-textarea:focus,
[data-theme="light"] .control-select:focus {
    border-color: rgba(232, 152, 90, 0.4);
}

/* ==============================================
   PNG Info: ライトテーマ修正
   ============================================== */

/* ネガティブプロンプト: mutedが薄すぎるので濃くする */
[data-theme="light"] .pnginfo-text--neg {
    color: #6a6a80;
}

/* プロンプトテキスト: 読みやすく */
[data-theme="light"] .pnginfo-text {
    color: var(--text-primary);
}

/* パラメータ値: accent-secondaryだとオレンジ色すぎるので調整 */
[data-theme="light"] .pnginfo-param-value {
    color: #5a5a72;
}

/* セクション背景 */
[data-theme="light"] .pnginfo-section {
    background: #f5f5f2;
}

/* パラメータ欄背景 */
[data-theme="light"] .pnginfo-param {
    background: #f0f0ed;
}

/* RAW データ表示 */
[data-theme="light"] .pnginfo-raw {
    background: #eeeee8;
    color: #5a5a72;
}

/* Apply ボタン: ライトテーマ */
[data-theme="light"] .pnginfo-apply-btn {
    color: #fff;
}

/* secondary ボタン */
[data-theme="light"] .pnginfo-apply-btn--secondary {
    background: #f0f0ed;
}

/* 画像プレビュー背景: ダーク維持のほうが画像が映える */
[data-theme="light"] .pnginfo-preview {
    background: #1a1a22;
}