/**
 * pixel-editor.css
 * ドット絵エディタ専用スタイル
 * (map-tool.css から抽出)
 */

/* Tile Editor Modal Base */
.tile-editor-modal h2 {
    margin: 0;
}

.tile-editor-modal .modal-body {
    flex: 1;
    display: flex;
    gap: 0;
    padding: 10px;
    overflow: hidden;
    position: relative;
}

.pixel-canvas-main-area {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: #0a0c10;
    border-radius: 8px;
    border: 1px solid #3a4150;
    position: relative;
    overflow: hidden;
    margin: 10px;
}

.tile-editor-modal .pixel-canvas-container-wrap {
    position: relative;
    width: 100%;
    height: 100%;
    cursor: crosshair;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
}

.tile-editor-modal .pixel-coords-display {
    position: absolute;
    bottom: 10px;
    right: 12px;
    background: rgba(0, 0, 0, 0.6);
    color: #00d4ff;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 10px;
    pointer-events: none;
    font-family: var(--font-mono, monospace);
    border: 1px solid rgba(0, 212, 255, 0.3);
    display: none;
}

.tile-editor-modal .pixel-current-color-preview {
    width: 20px;
    height: 20px;
    border-radius: 3px;
    border: 1px solid #fff;
    background: #ffffff;
    flex-shrink: 0;
}

.tile-editor-modal #pixel-sidebar .tool-group.pixel-actions-group {
    width: 100% !important;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    gap: 4px !important;
    flex: 1 1 auto;
}

.tile-editor-modal .pixel-btn-action-compact {
    flex: 1 !important;
    width: auto !important;
    min-width: 0 !important;
    height: 24px !important;
    font-size: 10px !important;
    padding: 0 4px !important;
    white-space: nowrap !important;
}

.tile-editor-modal .pixel-control-inner {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: nowrap;
}

.tile-editor-modal .pixel-btn-clear-danger {
    color: #ff6b6b !important;
    border-color: rgba(255, 107, 107, 0.2) !important;
}

.tile-editor-modal .pixel-color-input-compact {
    width: 28px !important;
    height: 24px !important;
    border: 1px solid #2d333f !important;
    background: transparent !important;
    padding: 2px !important;
    border-radius: 3px !important;
}

.tile-editor-modal .pixel-input-name {
    width: 70px !important;
}

.tile-editor-modal .pixel-input-pass {
    margin-left: 4px !important;
    width: 50px !important;
}

.tile-editor-modal .pixel-btn-save-primary {
    border: none !important;
    background: var(--c-accent-cyan) !important;
    color: #000 !important;
}

/* 汎用的なクラス（エディタ内で使用されるもの） */
.u-display-none {
    display: none !important;
}

.u-margin-0 {
    margin: 0 !important;
}

.u-margin-top-0 {
    margin-top: 0 !important;
}

.u-flex-1 {
    flex: 1 !important;
}

.u-margin-bottom-4 {
    margin-bottom: 4px !important;
}

.u-margin-bottom-8 {
    margin-bottom: 8px !important;
}

/* PC用：サイドバー内のフォーム要素を縦並びにするためのクラス群 */
@media (min-width: 769px) {
    .u-flex-direction-column {
        flex-direction: column !important;
        align-items: stretch !important;
    }

    .tile-editor-modal #pixel-sidebar .control-row.u-flex-direction-column {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 4px !important;
    }

    .tile-editor-modal #pixel-sidebar .control-row.u-flex-direction-column label {
        width: 100% !important;
        margin-bottom: 2px !important;
    }

    .tile-editor-modal #pixel-sidebar .control-row.u-flex-direction-column input:not([type="color"]),
    .tile-editor-modal #pixel-sidebar .control-row.u-flex-direction-column select {
        width: auto !important;
        min-width: 120px !important;
        max-width: 100% !important;
    }

    .tile-editor-modal #pixel-sidebar .control-row.u-flex-direction-column input[type="color"],
    .tile-editor-modal #pixel-sidebar .pixel-current-color-preview {
        width: 32px !important;
        height: 32px !important;
        min-width: 32px !important;
        flex: none !important;
        padding: 0 !important;
    }
}

/* サイドバータブ (v74.9) */
.pixel-sidebar-tabs {
    display: none;
    /* デフォルト非表示(PC) */
    width: 100%;
    margin-bottom: 8px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(0, 0, 0, 0.2);
}

.pixel-tab-btn {
    flex: 1;
    padding: 8px 4px;
    font-size: 11px;
    background: none;
    border: none;
    color: #888;
    cursor: pointer;
    transition: all 0.2s;
    border-bottom: 2px solid transparent;
}

.pixel-tab-btn.active {
    color: var(--c-accent-cyan);
    border-bottom-color: var(--c-accent-cyan);
    background: rgba(0, 212, 255, 0.05);
}

.pixel-tab-content {
    display: block;
    /* PCでは全て表示 */
    width: 100%;
}

/* モバイル調整 (v65/v72/v74.9 統合) */
@media (max-width: 768px) {
    .pixel-sidebar-tabs {
        display: flex;
        /* モバイルで表示 */
    }

    .pixel-tab-content {
        display: none;
        /* モバイルでは非アクティブを隠す */
    }

    .pixel-tab-content.active {
        display: block;
        /* アクティブのみ表示 */
    }

    .tile-editor-modal #pixel-sidebar {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: auto;
        width: 100% !important;
        max-width: 100vw !important;
        box-sizing: border-box !important;
        height: auto;
        max-height: 85vh !important;
        min-height: 40px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        box-shadow: 0 5px 25px rgba(0, 0, 0, 0.8);
        background: rgba(15, 17, 21, 0.95);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        z-index: 1000;
        display: flex;
        flex-wrap: wrap;
        padding: 4px;
        gap: 0;
        align-items: flex-start;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
    }

    .tile-editor-modal #pixel-sidebar .sidebar-row {
        display: flex;
        flex-wrap: wrap !important;
        width: 100%;
        box-sizing: border-box;
        gap: 4px;
        align-items: flex-start;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        padding-bottom: 8px;
        margin-bottom: 4px;
    }

    .tile-editor-modal #pixel-sidebar .tool-group {
        border-right: 1px solid rgba(255, 255, 255, 0.1);
        padding: 6px 10px !important;
        display: flex;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        align-items: center;
        gap: 6px;
        flex: 1 1 auto;
        min-width: 120px;
    }

    .tile-editor-modal #pixel-sidebar .tool-group h3 {
        flex: 0 0 100%;
        font-size: 12px !important;
        color: var(--c-accent-cyan);
        margin: 2px 0;
        padding-left: 4px !important;
    }

    .tile-editor-modal #pixel-sidebar .control-row {
        margin: 0 !important;
        display: flex;
        align-items: center;
        gap: 4px;
    }

    .tile-editor-modal #pixel-sidebar .tool-btn {
        width: 28px !important;
        height: 28px !important;
        min-width: 28px !important;
    }

    .tile-editor-modal #pixel-sidebar select,
    .tile-editor-modal #pixel-sidebar input[type="range"] {
        height: 24px !important;
        width: 80px !important;
        font-size: 11px !important;
    }

    .tile-editor-modal .modal-body {
        padding: 5px !important;
    }

    .tile-editor-modal .pixel-canvas-main-area {
        margin: 5px !important;
    }
}

/* Import/Export List Items */
#pixel-import-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
    gap: 12px;
    padding: 10px;
    max-height: 400px;
    overflow-y: auto;
}

.import-tile-item {
    position: relative;
    aspect-ratio: 1;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    cursor: pointer;
    overflow: hidden;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.import-tile-item:hover {
    border-color: var(--c-accent-cyan);
    background: rgba(0, 212, 255, 0.1);
    transform: translateY(-2px);
}

.import-tile-item img {
    max-width: 80%;
    max-height: 80%;
    object-fit: contain;
    image-rendering: pixelated;
}

.tile-name-dim {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.7);
    color: #fff;
    font-size: 9px;
    padding: 2px 4px;
    text-align: center;
    opacity: 0;
    transition: opacity 0.2s;
}

.import-tile-item:hover .tile-name-dim {
    opacity: 1;
}

.tile-editor-modal .modal-top-actions {
    position: absolute !important;
    top: 10px !important;
    right: 10px !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 12px !important;
    z-index: 9999 !important;
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    pointer-events: auto !important;
}

.tile-editor-modal .modal-top-actions .close {
    position: static !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 32px !important;
    height: 32px !important;
    font-size: 28px !important;
    margin: 0 !important;
    line-height: 1 !important;
    cursor: pointer !important;
    color: #888890 !important;
    background: none !important;
    border: none !important;
    padding: 0 !important;
}

#btn-pixel-full-toggle {
    background: none !important;
    border: none !important;
    padding: 0 !important;
    cursor: pointer !important;
    color: #888890 !important;
    opacity: 0.6 !important;
    transition: all 0.2s !important;
}

#btn-pixel-full-toggle:hover {
    color: var(--c-accent-cyan) !important;
    opacity: 1 !important;
}

.pixel-save-modal-body {
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
    padding: 20px !important;
    width: 100% !important;
}

.private-container {
    margin: 4px 0 !important;
    width: 100% !important;
}

.pixel-modal-checkbox-label {
    display: flex !important;
    flex-direction: row !important;
    /* 横並びを強制 */
    align-items: center !important;
    justify-content: flex-start !important;
    /* 左寄せ */
    gap: 8px !important;
    font-size: 14px !important;
    color: #ccc !important;
    cursor: pointer !important;
    width: 100% !important;
    user-select: none !important;
}

.pixel-modal-checkbox-label input[type="checkbox"] {
    width: 16px !important;
    height: 16px !important;
    margin: 0 !important;
    flex-shrink: 0 !important;
}

/* Terms Agreement UI */
.pixel-terms-area {
    background: rgba(0, 212, 255, 0.05);
    border: 1px solid rgba(0, 212, 255, 0.2);
    border-radius: 6px;
    padding: 10px;
    margin-bottom: 15px;
    font-size: 11px;
    line-height: 1.5;
}

.pixel-terms-area a {
    color: var(--c-accent-cyan);
    text-decoration: underline;
}

.pixel-agreement-row {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    cursor: pointer;
}