/**
 * HTML/CSS Live Editor - プロジェクト管理 CSS
 * Version: 3.2.0
 */

/* ════════════════════════════════════
   変数
════════════════════════════════════ */
.hcle-pm-wrap {
    --pm-bg:       #f0f0f4;
    --pm-surf:     #ffffff;
    --pm-border:   #e0e0ea;
    --pm-border2:  #c8c8da;
    --pm-acc:      #3d63dd;
    --pm-acc-h:    #2d52cc;
    --pm-acc-lt:   #eef2ff;
    --pm-txt:      #18181e;
    --pm-muted:    #7878a0;
    --pm-red:      #d03050;
    --pm-red-lt:   #fff0f2;
    --pm-green:    #1a9e6a;
    --pm-radius:   8px;
    --pm-shadow:   0 2px 8px rgba(0,0,0,0.08);
    --pm-shadow-lg:0 8px 32px rgba(0,0,0,0.14);

    font-family: 'Noto Sans JP', -apple-system, sans-serif;
    color: var(--pm-txt);
    background: var(--pm-bg);
    margin: -20px -20px 0 -2px;
    min-height: calc(100vh - 32px);
}
.hcle-pm-wrap * { box-sizing: border-box; }

/* ════════════════════════════════════
   ページヘッダー
════════════════════════════════════ */
.pm-page-header {
    background: var(--pm-surf);
    border-bottom: 1px solid var(--pm-border);
    padding: 16px 24px;
    display: flex;
    align-items: center;
    box-shadow: var(--pm-shadow);
}
.pm-page-title {
    font-size: 16px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
}
.pm-badge {
    background: var(--pm-acc);
    color: #fff;
    font-size: 10px;
    padding: 2px 8px;
    border-radius: 100px;
    font-weight: 500;
}

/* ════════════════════════════════════
   2ペインレイアウト
════════════════════════════════════ */
.pm-layout {
    display: grid;
    grid-template-columns: 280px 1fr;
    height: calc(100vh - 32px - 53px);
    overflow: hidden;
}

/* ════════════════════════════════════
   左サイドバー
════════════════════════════════════ */
.pm-sidebar {
    background: var(--pm-surf);
    border-right: 1px solid var(--pm-border);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.pm-sidebar-block {
    padding: 14px 14px 12px;
    border-bottom: 1px solid var(--pm-border);
    flex-shrink: 0;
}

.pm-sidebar-block--list {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-height: 0;
    border-bottom: none;
}

.pm-sidebar-block-title {
    font-size: 11px;
    font-weight: 600;
    color: var(--pm-muted);
    letter-spacing: 0.5px;
    text-transform: uppercase;
    margin-bottom: 10px;
}

.pm-new-date {
    font-size: 11px;
    color: var(--pm-muted);
    margin: 6px 0 8px;
}

/* ─── タブ ─── */
.pm-tabs {
    display: flex;
    border: 1px solid var(--pm-border);
    border-radius: 6px;
    overflow: hidden;
    margin-bottom: 8px;
}
.pm-tab {
    flex: 1;
    padding: 6px 0;
    font-size: 12px;
    font-weight: 500;
    text-align: center;
    border: none;
    background: transparent;
    color: var(--pm-muted);
    cursor: pointer;
    font-family: inherit;
    transition: all .15s;
}
.pm-tab:hover:not(.pm-tab--active) {
    background: var(--pm-bg);
}
.pm-tab--active {
    background: var(--pm-acc);
    color: #fff;
}

/* ─── プロジェクト一覧 ─── */
.pm-project-list {
    flex: 1;
    overflow-y: auto;
    padding: 6px 6px;
}
.pm-project-list::-webkit-scrollbar { width: 4px; }
.pm-project-list::-webkit-scrollbar-thumb {
    background: var(--pm-border2);
    border-radius: 2px;
}

.pm-project-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 10px;
    border-radius: 6px;
    cursor: pointer;
    border: 1px solid transparent;
    margin-bottom: 3px;
    transition: background .12s;
}
.pm-project-item:hover { background: var(--pm-bg); }
.pm-project-item.pm-project-item--active {
    background: var(--pm-acc-lt);
    border-color: var(--pm-acc);
}

.pm-project-icon {
    width: 32px; height: 32px;
    background: var(--pm-bg);
    border-radius: 6px;
    display: flex; align-items: center; justify-content: center;
    font-size: 15px;
    flex-shrink: 0;
    transition: background .12s;
}
.pm-project-item--active .pm-project-icon {
    background: var(--pm-acc);
}

.pm-project-info { flex: 1; min-width: 0; }
.pm-project-name {
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.pm-project-meta {
    font-size: 11px;
    color: var(--pm-muted);
    margin-top: 1px;
}

.pm-project-count {
    background: var(--pm-bg);
    color: var(--pm-muted);
    font-size: 10.5px;
    font-family: 'Courier New', monospace;
    padding: 2px 7px;
    border-radius: 100px;
    flex-shrink: 0;
}
.pm-project-item--active .pm-project-count {
    background: var(--pm-acc);
    color: #fff;
}

.pm-empty-list {
    text-align: center;
    padding: 32px 16px;
    color: var(--pm-muted);
    font-size: 13px;
}
.pm-empty-list-icon { font-size: 28px; opacity: .35; margin-bottom: 8px; }

/* ════════════════════════════════════
   右メイン
════════════════════════════════════ */
.pm-main {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: var(--pm-bg);
}

.pm-main-empty {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    color: var(--pm-muted);
}
.pm-main-empty-icon { font-size: 44px; opacity: .2; }
.pm-main-empty p    { font-size: 13.5px; }

#pm-project-detail {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    flex: 1;
}

/* ─── プロジェクトヘッダー ─── */
.pm-project-head {
    background: var(--pm-surf);
    border-bottom: 1px solid var(--pm-border);
    padding: 14px 20px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    flex-shrink: 0;
}
.pm-project-head-left {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.pm-project-title-input {
    font-size: 16px;
    font-weight: 600;
    border: none;
    border-bottom: 2px solid transparent;
    outline: none;
    padding: 2px 4px;
    background: transparent;
    color: var(--pm-txt);
    font-family: inherit;
    transition: border-color .15s;
    width: 100%;
}
.pm-project-title-input:focus { border-bottom-color: var(--pm-acc); }

.pm-project-memo-input {
    font-size: 12.5px;
    border: none;
    border-bottom: 1px solid transparent;
    outline: none;
    padding: 2px 4px;
    background: transparent;
    color: var(--pm-muted);
    font-family: inherit;
    transition: border-color .15s;
    width: 100%;
}
.pm-project-memo-input:focus { border-bottom-color: var(--pm-border2); }

.pm-project-dates {
    font-size: 11.5px;
    color: var(--pm-muted);
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}
.pm-date-input {
    border: 1px solid var(--pm-border);
    border-radius: 4px;
    padding: 2px 6px;
    font-size: 11px;
    outline: none;
    color: var(--pm-txt);
    background: var(--pm-bg);
    font-family: inherit;
    vertical-align: middle;
}
.pm-date-input:focus { border-color: var(--pm-acc); }

/* ════════════════════════════════════
   ファイルテーブル
════════════════════════════════════ */
.pm-files-area {
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}
.pm-files-area::-webkit-scrollbar { width: 5px; }
.pm-files-area::-webkit-scrollbar-thumb {
    background: var(--pm-border2);
    border-radius: 3px;
}

/* ─── テーブルヘッダー ─── */
.pm-file-table-head {
    display: flex;
    align-items: center;
    padding: 8px 16px;
    background: var(--pm-bg);
    border-bottom: 1px solid var(--pm-border);
    font-size: 11.5px;
    font-weight: 600;
    color: var(--pm-muted);
    flex-shrink: 0;
    gap: 8px;
}

/* ─── 列幅 ─── */
.pm-col-drag   { width: 24px;  flex-shrink: 0; }
.pm-col-check  { width: 28px;  flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.pm-col-status { width: 80px;  flex-shrink: 0; }
.pm-col-name   { flex: 1; min-width: 0; }
.pm-col-memo   { flex: 1; min-width: 0; }
.pm-col-ops    { width: 120px; flex-shrink: 0; }

/* ─── チェックボックス ─── */
.pm-col-check input[type="checkbox"] {
    width: 15px;
    height: 15px;
    accent-color: var(--pm-acc);
    cursor: pointer;
}

/* ─── プロジェクト保存ボタン ─── */
.pm-btn--save-project {
    background: #e74c3c;
    color: #fff;
    border: none;
    transition: background .13s;
}
.pm-btn--save-project:hover {
    background: #c0392b;
}
/* チェックがある場合はパルスアニメーション */
.pm-btn--save-project.pm-has-checked {
    animation: pm-save-pulse 1.5s ease-in-out infinite;
}
@keyframes pm-save-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(231,76,60,0.5); }
    50%       { box-shadow: 0 0 0 6px rgba(231,76,60,0); }
}

/* ─── テーブル行 ─── */
.pm-file-table-body { flex: 1; }

.pm-file-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 16px;
    border-bottom: 1px solid var(--pm-border);
    background: var(--pm-surf);
    transition: background .12s;
}
.pm-file-row:hover { background: #fafafe; }

/* 作成中は赤ハイライト */
.pm-file-row--in-progress {
    background: #fff5f5;
    border-left: 3px solid var(--pm-red);
}
.pm-file-row--in-progress:hover { background: #ffeeee; }

/* ドラッグ中 */
.pm-file-row--dragging {
    opacity: .5;
    background: var(--pm-acc-lt);
}
.pm-file-row--drag-over {
    border-top: 2px solid var(--pm-acc);
}

/* ─── ドラッグハンドル ─── */
.pm-drag-handle {
    cursor: grab;
    color: var(--pm-border2);
    font-size: 16px;
    line-height: 1;
    user-select: none;
    padding: 2px 4px;
    transition: color .12s;
}
.pm-drag-handle:hover  { color: var(--pm-muted); }
.pm-drag-handle:active { cursor: grabbing; }

/* ─── ステータスバッジ（クリックでサイクル） ─── */
.pm-status-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 72px;
    padding: 4px 6px;
    border-radius: 5px;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    border: none;
    font-family: inherit;
    white-space: nowrap;
    transition: filter .12s;
}
.pm-status-btn:hover { filter: brightness(.92); }

.pm-status-btn[data-status="unstarted"]   { background: #e8e8f0; color: #6868a0; }
.pm-status-btn[data-status="in_progress"] { background: #fde8e8; color: #c03030; }
.pm-status-btn[data-status="done"]        { background: #ddf0e8; color: #1a7050; }

/* ─── 行内テキスト入力 ─── */
.pm-file-name-input,
.pm-file-memo-input {
    width: 100%;
    border: none;
    border-bottom: 1px solid transparent;
    outline: none;
    background: transparent;
    font-size: 13px;
    font-family: inherit;
    color: var(--pm-txt);
    padding: 2px 4px;
    transition: border-color .15s;
}
.pm-file-name-input:focus,
.pm-file-memo-input:focus { border-bottom-color: var(--pm-acc); }
.pm-file-memo-input { color: var(--pm-muted); font-size: 12px; }

/* ─── 操作ボタン群 ─── */
.pm-file-ops { display: flex; gap: 5px; }

/* ─── 新規テーマ追加行 ─── */
.pm-add-file-row {
    padding: 14px 16px;
    border-top: 2px solid var(--pm-border);
    background: var(--pm-bg);
    flex-shrink: 0;
}
.pm-add-file-row-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--pm-muted);
    margin-bottom: 8px;
}
.pm-add-file-row-fields {
    display: flex;
    gap: 8px;
    align-items: center;
}
.pm-add-file-row-fields .pm-input { flex: 1; }

/* ════════════════════════════════════
   エディタオーバーレイ
════════════════════════════════════ */
.pm-editor-overlay {
    position: fixed;
    inset: 0;
    background: #f0f0f4;
    z-index: 10020;
    display: flex;
    flex-direction: column;
}
.pm-editor-topbar {
    background: #1e2433;
    color: #fff;
    height: 48px;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 16px;
    flex-shrink: 0;
    box-shadow: 0 2px 8px rgba(0,0,0,.2);
}
.pm-editor-topbar-title {
    font-size: 13.5px;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 8px;
}
.pm-editor-sep { opacity: .4; }
.pm-editor-topbar-actions { margin-left: auto; display: flex; gap: 8px; }
.pm-editor-frame { flex: 1; overflow: hidden; }

.pm-save-status {
    font-size: 11.5px;
    color: rgba(255,255,255,.6);
    display: flex;
    align-items: center;
    gap: 5px;
}
.pm-save-status.pm-save-status--saved   { color: #4caf82; }
.pm-save-status.pm-save-status--saving  { color: #f0c040; }

/* ════════════════════════════════════
   共通フォームパーツ
════════════════════════════════════ */
.pm-input {
    width: 100%;
    border: 1px solid var(--pm-border);
    border-radius: 6px;
    padding: 8px 10px;
    font-size: 12.5px;
    font-family: inherit;
    outline: none;
    color: var(--pm-txt);
    background: var(--pm-bg);
    transition: border-color .15s;
}
.pm-input:focus {
    border-color: var(--pm-acc);
    background: #fff;
    box-shadow: 0 0 0 3px rgba(61,99,221,.1);
}
.pm-input--mt    { margin-top: 6px; }
.pm-input--search { margin-bottom: 6px; }

/* ─── ボタン ─── */
.pm-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 7px 14px;
    border-radius: 6px;
    font-size: 12.5px;
    font-family: inherit;
    font-weight: 500;
    cursor: pointer;
    border: none;
    white-space: nowrap;
    transition: all .13s;
    text-decoration: none;
}
.pm-btn--primary { background: var(--pm-acc); color: #fff; }
.pm-btn--primary:hover { background: var(--pm-acc-h); color: #fff; }
.pm-btn--ghost {
    background: transparent;
    color: rgba(255,255,255,.8);
    border: 1px solid rgba(255,255,255,.2);
}
.pm-btn--ghost:hover { background: rgba(255,255,255,.1); color: #fff; }
.pm-btn--danger { background: transparent; color: var(--pm-red); border: 1px solid #f0b0b8; }
.pm-btn--danger:hover { background: var(--pm-red-lt); }
.pm-btn--sm   { padding: 4px 10px; font-size: 12px; }
.pm-btn--xs   { padding: 3px 8px;  font-size: 11px; }
.pm-btn--block { width: 100%; justify-content: center; margin-top: 8px; }

/* ─── ローディング ─── */
.pm-loading {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 20px;
    color: var(--pm-muted);
    font-size: 13px;
    justify-content: center;
}
.pm-spinner {
    display: inline-block;
    width: 16px; height: 16px;
    border: 2px solid var(--pm-border);
    border-top-color: var(--pm-acc);
    border-radius: 50%;
    animation: pm-spin .7s linear infinite;
    flex-shrink: 0;
}
@keyframes pm-spin { to { transform: rotate(360deg); } }

/* ─── トースト ─── */
.pm-toast-container {
    position: fixed;
    top: 40px; right: 20px;
    z-index: 10050;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.pm-toast {
    background: #1e2433;
    color: #fff;
    padding: 10px 16px;
    border-radius: 7px;
    font-size: 13px;
    box-shadow: var(--pm-shadow-lg);
    display: flex;
    align-items: center;
    gap: 8px;
    animation: pm-toast-in .2s ease;
}
.pm-toast--success { border-left: 3px solid #4caf82; }
.pm-toast--error   { border-left: 3px solid #e05060; }
@keyframes pm-toast-in {
    from { opacity: 0; transform: translateX(20px); }
    to   { opacity: 1; transform: none; }
}

/* ─── 汎用ユーティリティ ─── */
.pm-hidden { display: none !important; }

/* ════════════════════════════════════
   ㉑㉒ 項目適用ボタン・見出し
════════════════════════════════════ */

/* ㉑ チェック列ヘッダーの「項目適用」ラベル */
.pm-col-check-label {
    font-size: 10.5px;
    font-weight: 600;
    color: var(--pm-muted);
    display: block;
    margin-bottom: 3px;
    white-space: nowrap;
}

/* ㉒ 項目適用するボタン */
.pm-btn--apply {
    background: #2980b9;
    color: #fff;
    border: none;
    transition: background .13s;
    animation: pm-apply-pulse 1.5s ease-in-out infinite;
}
.pm-btn--apply:hover {
    background: #1a6fa0;
    animation: none;
}
@keyframes pm-apply-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(41,128,185,0.5); }
    50%       { box-shadow: 0 0 0 6px rgba(41,128,185,0); }
}