/* projects-mgr.css — 프로젝트관리 페이지 (전용).
 *
 * 두 모드를 같은 .pm-pane 안에서 렌더:
 *   1) "list"  — 카드 그리드 + "새 프로젝트" 버튼
 *   2) "form"  — 단일 폼 (등록 / 수정)
 *
 * 모든 색은 CSS 변수만 사용 — Phase C-1 키컬러 변경 자동 반영.
 */

.pm-pane {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    padding: 24px 28px;
    box-sizing: border-box;
    gap: 18px;
    overflow-y: auto;
}

.pm-pane-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    flex-shrink: 0;
}
.pm-pane-head h2 {
    font-size: 18px;
    font-weight: 700;
    color: var(--text-primary);
}
.pm-pane-sub {
    color: var(--text-primary);
    font-size: 13px;
    line-height: 1.6;
    margin-top: 4px;
    max-width: 720px;
}
.pm-pane-actions {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.pm-back {
    align-self: flex-start;
    padding: 5px 12px;
    font-size: 12px;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--text-primary);
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.75);
    cursor: pointer;
    transition: all 0.15s ease;
}
.pm-back:hover {
    background: rgba(255, 255, 255, 0.92);
    border-color: rgba(0, 0, 0, 0.12);
    color: var(--accent);
}

/* ---- list mode ---- */
.pm-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 14px;
}

.pm-card {
    background: rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: 12px;
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    cursor: pointer;
    transition: border-color 150ms ease, transform 150ms ease,
                box-shadow 150ms ease, background 150ms ease;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
}
.pm-card:hover {
    background: rgba(255, 255, 255, 0.8);
    border-color: rgba(0, 0, 0, 0.1);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
}
.pm-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
.pm-card-head h3 {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.pm-card-actions {
    display: inline-flex;
    gap: 2px;
    flex-shrink: 0;
}
.pm-card-actions .btn-icon {
    width: 28px;
    height: 28px;
}
.pm-card-desc {
    font-size: 12px;
    color: var(--text-secondary);
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.pm-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 4px;
}
.pm-card-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 500;
    background: rgba(99, 144, 234, 0.08);
    color: #4070d0;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.pm-card-chip-dim {
    background: rgba(0, 0, 0, 0.05);
    color: var(--text-primary);
}
.pm-card-chip-warn {
    background: rgba(245, 158, 11, 0.1);
    color: #b45309;
    border: 1px solid rgba(245, 158, 11, 0.25);
}
.pm-card-chip i { font-size: 12px; }

/* 프로젝트 카드 - 연결 리소스 영역 */
.pm-card-resources {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 4px;
    max-height: 52px;
    overflow-y: auto;
    scrollbar-width: thin;
}
.pm-card-resources::-webkit-scrollbar {
    width: 3px;
}
.pm-card-resources::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.12);
    border-radius: 3px;
}
.pm-resource-chip {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 10px;
    font-weight: 500;
    padding: 2px 6px;
    border-radius: 4px;
    white-space: nowrap;
    line-height: 1.4;
}
.pm-resource-chip i {
    font-size: 11px;
}

.pm-empty {
    margin: 40px auto;
    text-align: center;
    color: var(--text-primary);
    font-size: 14px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}
.pm-empty i {
    font-size: 48px;
    color: var(--text-primary);
    margin-bottom: 4px;
}
.pm-empty-sub {
    font-size: 12px;
    color: var(--text-primary);
}

/* ---- form mode (deprecated inline) ---- */
.pm-pane:has(.pm-form-wrap) {
    align-items: center;
}
.pm-pane:has(.pm-form-wrap) .pm-back,
.pm-pane:has(.pm-form-wrap) .pm-pane-head {
    width: 100%;
    max-width: 760px;
}
.pm-form-wrap {
    width: 100%;
    max-width: 760px;
    background: rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: 12px;
    padding: 28px 32px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

/* ---- form mode: 모달 내부 ---- */
.pm-form-wrap-modal {
    padding: 0;
}
.pm-form-wrap-modal .form-section-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-primary);
    margin-top: 20px;
    margin-bottom: 10px;
    padding-bottom: 6px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}
.pm-form-wrap-modal .form-section-title:first-child {
    margin-top: 0;
}

/* ---- 프로젝트 폼 내부 탭 ---- */
.pm-inner-tabs {
    display: flex;
    gap: 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    margin-bottom: 20px;
}
.pm-inner-tab {
    padding: 10px 16px;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-secondary);
    cursor: pointer;
    border: none;
    background: none;
    border-bottom: 2px solid transparent;
    transition: color 0.15s, border-color 0.15s;
}
.pm-inner-tab:hover {
    color: var(--text-primary);
}
.pm-inner-tab.active {
    color: var(--accent);
    font-weight: 700;
    border-bottom-color: var(--accent);
}
.pm-tab-content {
    display: none;
}
.pm-tab-content.active {
    display: block;
}

/* ---- AI 자동 채우기 영역 ---- */
.pm-autofill-area {
    margin-bottom: 20px;
}
.pm-autofill-drop {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 16px 20px;
    border: 1.5px dashed rgba(99, 144, 234, 0.4);
    border-radius: 10px;
    background: rgba(99, 144, 234, 0.04);
    text-align: center;
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s;
}
.pm-autofill-drop:hover,
.pm-autofill-drop.dragover {
    border-color: var(--accent);
    background: rgba(99, 144, 234, 0.08);
}
.pm-autofill-drop i {
    font-size: 22px;
    color: var(--accent);
}
.pm-autofill-drop span {
    font-size: 12px;
    color: var(--text-secondary);
    line-height: 1.5;
}
.pm-autofill-actions {
    display: flex;
    gap: 8px;
    margin-top: 6px;
}
.pm-autofill-actions .btn-secondary {
    font-size: 12px;
    padding: 4px 12px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    cursor: pointer;
}
.pm-autofill-textarea {
    min-height: 120px;
    font-size: 12px;
    margin-top: 8px;
}
.pm-autofill-btns {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    margin-top: 8px;
}
.pm-autofill-btns .btn-primary,
.pm-autofill-btns .btn-secondary {
    font-size: 12px;
    padding: 6px 14px;
}
.pm-autofill-loading {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    background: rgba(99, 144, 234, 0.06);
    border-radius: 8px;
    font-size: 13px;
    color: var(--accent);
}
.pm-autofill-loading i {
    animation: spin 1s linear infinite;
}
@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}
.pm-form-actions {
    margin-top: 18px;
    display: flex;
    gap: 10px;
    justify-content: flex-end;
}

/* Per-project monitored containers list — mirrors .env-rows styling
   so the visual rhythm of the form is consistent. */
.project-containers,
.project-resource-list {
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 6px 8px;
    background: var(--bg-input);
}
.project-container-row {
    display: grid;
    grid-template-columns: 1fr 32px;
    gap: 8px;
    align-items: center;
    padding: 4px 0;
}
.project-container-row + .project-container-row {
    border-top: 1px dashed var(--border-color);
}
.project-container-row .form-input {
    background: var(--bg-primary);
}
.project-container-del {
    color: var(--text-tertiary);
    width: 28px;
    height: 28px;
}
.project-container-del:hover { color: #b91c1c; }

/* ===== Project info modal — read-only state (project-user role) =====
 *
 * Toggled by JS: modalBody.classList.toggle("pm-form-readonly", readOnly).
 * Class-based so async-loaded rows (env vars, containers, EC2/RDS/S3
 * lists) get the disabled look automatically — no need to chase them
 * with a per-element disable() loop after each fetch returns.
 *
 * Visual contract: every input / button / select inside the modal
 * looks "obviously disabled" (gray, not-allowed cursor) AND ignores
 * pointer events so clicks / typing have no effect. We keep `disabled`
 * on the actual save button too for assistive-tech / keyboard users.
 */
/* Form fields inside the modal body — always grayed in read-only. */
.pm-form-readonly .modal-body input,
.pm-form-readonly .modal-body textarea,
.pm-form-readonly .modal-body select {
    background: #f3f4f6 !important;
    color: #9ca3af !important;
    border-color: #e5e7eb !important;
    cursor: not-allowed !important;
    pointer-events: none;
}
/* In-body buttons (행 추가 / DB 추가 / 가져오기 etc.) — also grayed. */
.pm-form-readonly .modal-body button {
    background: #f3f4f6 !important;
    color: #9ca3af !important;
    border-color: #e5e7eb !important;
    cursor: not-allowed !important;
    pointer-events: none;
    opacity: 0.75;
}
/* `details/summary` (the .env paste collapsible) — same treatment so
   the user can't expand it and start typing into the textarea inside. */
.pm-form-readonly .modal-body details {
    pointer-events: none;
    opacity: 0.65;
}
/* Footer: ONLY the disabled save button gets the gray look. Cancel
   stays clickable so the user can exit the modal. The disabled attr
   on the save button is the structural source of truth — we just give
   it stronger visual styling here (the browser's default disabled
   shade is too subtle on the accent-colored .btn-primary). */
.pm-form-readonly .modal-footer button[disabled] {
    background: #f3f4f6 !important;
    color: #9ca3af !important;
    border-color: #e5e7eb !important;
    cursor: not-allowed !important;
    pointer-events: none;
    opacity: 0.75;
}