/**
 * detail-common.css
 * Output Detail / Outcome Detail 공유 CSS
 * 테마 색상은 CSS 변수로 분리하여 페이지별 테마 적용
 */

/* ===== 테마 변수 ===== */
.output-detail-page { --theme-color: #2196F3; --theme-light: #e3f2fd; --theme-dark: #1976d2; --theme-gradient-end: #64b5f6; }
.outcome-detail-page { --theme-color: #9c27b0; --theme-light: #f3e5f5; --theme-dark: #7b1fa2; --theme-gradient-end: #ba68c8; }

/* ===== 상태 배지 ===== */
.status-badge {
	display: inline-block;
	padding: 4px 12px;
	border-radius: 12px;
	font-size: 12px;
	font-weight: 500;
}
.status-badge.not_started { background: #f5f5f5; color: #666; }
.status-badge.in_progress { background: #e3f2fd; color: #1976d2; }
.status-badge.completed { background: #e8f5e9; color: #388e3c; }
.status-badge.delayed { background: #ffebee; color: #d32f2f; }

/* ===== 상세 정보 카드 ===== */
.detail-card {
	background: #fff;
	border: 1px solid #E5E5EC;
	border-radius: 8px;
	padding: 24px;
	margin-bottom: 24px;
}
.detail-card-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 20px;
	padding-bottom: 16px;
	border-bottom: 1px solid #E5E5EC;
}
.detail-card-header h2 {
	font-size: 18px;
	font-weight: 600;
	color: #333;
}

/* ===== POD 점검 섹션 ===== */
.pod-section {
	margin-bottom: 24px;
}
.pod-section:last-child {
	margin-bottom: 0;
}
.pod-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	gap: 16px;
	margin-bottom: 12px;
}
.pod-header .left {
	display: flex;
	align-items: center;
	gap: 16px;
}
.pod-header .right {
	display: flex;
	align-items: center;
	gap: 16px;
}
.pod-manager-input {
	display: flex;
	align-items: center;
	gap: 8px;
}
.pod-manager-input label {
	font-size: 13px;
	color: #666;
}
.pod-manager-input input[type="text"] {
	width: 100px;
	padding: 6px 10px;
	border: 1px solid #E5E5EC;
	border-radius: 4px;
	font-size: 13px;
}

/* POD 버튼 영역 */
.pod-btn-group {
	display: flex;
	gap: 8px;
	flex-shrink: 0;
}
.pod-btn-group .main__btn {
	font-size: 13px;
}

/* PMC/KOICA 담당자 선택 버튼 */
.manager-select-btn {
	display: inline-flex;
	align-items: center;
	padding: 4px 12px;
	font-size: 13px;
	background: #f5f5f5;
	border: 1px solid #ddd;
	border-radius: 4px;
	cursor: pointer;
	text-decoration: none;
	color: #333;
	min-width: 80px;
	justify-content: center;
	transition: background 0.2s;
}
.manager-select-btn:hover {
	background: #e8e8e8;
}
.manager-select-btn.has-selection {
	background: var(--theme-light, #e3f2fd);
	border-color: var(--theme-color, #1976d2);
	color: var(--theme-dark, #1976d2);
}

/* POD 테이블 */
.pod-table {
	width: 100%;
	border-collapse: collapse;
}
.pod-table th, .pod-table td {
	padding: 12px;
	text-align: center;
	border: 1px solid #E5E5EC;
	font-size: 13px;
}
.pod-table th {
	background: #f9f9f9;
	font-weight: 600;
}
.pod-table td.left-align {
	text-align: left;
}

/* POD 관리 버튼 */
.pod-action-btn {
	padding: 4px 8px;
	font-size: 12px;
	border-radius: 4px;
	cursor: pointer;
	margin: 0 2px;
}
.pod-action-btn.pod-edit-item-btn {
	background: #f5f5f5;
	border: 1px solid #ddd;
	color: #333;
}
.pod-action-btn.pod-edit-item-btn:hover {
	background: #e8e8e8;
}
.pod-action-btn.pod-delete-item-btn {
	background: #fff;
	border: 1px solid #f44336;
	color: #f44336;
}
.pod-action-btn.pod-delete-item-btn:hover {
	background: #ffebee;
}

/* ===== 담당자 프로필 카드 ===== */
.responsible-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 20px;
	background: #fafafa;
	border-radius: 8px;
}
.responsible-card .profile-image {
	width: 80px;
	height: 80px;
	border-radius: 50%;
	object-fit: cover;
	margin-bottom: 12px;
	border: 2px solid #E5E5EC;
}
.responsible-card .org {
	font-size: 12px;
	color: #999;
	margin-bottom: 4px;
}
.responsible-card .name {
	font-size: 16px;
	font-weight: 600;
	color: #333;
	margin-bottom: 4px;
}
.responsible-card .position {
	font-size: 13px;
	color: #666;
}
.responsible-card.empty {
	color: #999;
	font-size: 14px;
}

/* ===== 진행률 프로그레스 바 ===== */
.progress__box {
	margin-top: 24px;
}
.progress-bar-container-wr {
	position: relative;
	overflow: hidden;
}
.bubble__wr {
	position: relative;
	height: 32px;
	overflow: visible;
}
.bubble {
	position: absolute;
	background: var(--theme-color, #2196F3);
	color: #fff;
	padding: 4px 10px;
	border-radius: 4px;
	font-size: 12px;
	font-weight: 600;
	white-space: nowrap;
}
.bubble::after {
	content: '';
	position: absolute;
	bottom: -6px;
	left: 50%;
	transform: translateX(-50%);
	border-left: 6px solid transparent;
	border-right: 6px solid transparent;
	border-top: 6px solid var(--theme-color, #2196F3);
}
.progress-bar-container {
	height: 12px;
	background: #e0e0e0;
	border-radius: 6px;
	overflow: hidden;
}
.progress-bar-fill {
	height: 100%;
	background: linear-gradient(90deg, var(--theme-color, #2196F3), var(--theme-gradient-end, #64b5f6));
	border-radius: 6px;
	transition: width 0.3s ease;
	width: var(--progress, 0%);
}
.progress-tx-container {
	margin-top: 8px;
	font-size: 13px;
	color: #666;
}

/* ===== 카테고리 배지 ===== */
.category-badge {
	display: inline-block;
	padding: 4px 8px;
	border-radius: 4px;
	font-size: 11px;
	font-weight: 500;
}
.category-badge.baseline { background: #fff3e0; color: #ef6c00; }
.category-badge.midline1,
.category-badge.midline2,
.category-badge.midline3 { background: #e3f2fd; color: #1976d2; }
.category-badge.endline { background: #e8f5e9; color: #388e3c; }

/* ===== 지표 유형 배지 ===== */
.indicator-type-badge {
	display: inline-block;
	padding: 4px 8px;
	border-radius: 4px;
	font-size: 11px;
	font-weight: 500;
	margin-right: 4px;
}
.indicator-type-badge.badge-quantitative,
.indicator-type-badge.quantitative { background: #e8f5e9; color: #388e3c; }
.indicator-type-badge.badge-qualitative,
.indicator-type-badge.qualitative { background: #fce4ec; color: #c2185b; }

/* ===== 수정 모드 스타일 ===== */
.table__wr.edit-mode table {
	border: 2px solid var(--theme-color, #2196F3);
}
.table__wr.edit-mode tbody tr {
	background-color: #fafbff !important;
}
.indicator-row.dragging {
	opacity: 0.5;
	background: var(--theme-light, #e3f2fd) !important;
}
.indicator-row.drag-over {
	border-top: 2px solid var(--theme-color, #2196F3);
}
.indicator-row.drag-over-bottom {
	border-bottom: 2px solid var(--theme-color, #2196F3);
}
.indicator-row.deleted-row {
	opacity: 0.4;
	text-decoration: line-through;
}
.indicator-row.new-row {
	background-color: #e8f5e9 !important;
}
.drag-handle {
	cursor: grab;
	color: #999;
	margin-right: 8px;
	user-select: none;
}
.drag-handle:active {
	cursor: grabbing;
}

/* 지표 수정 모드 입력 */
.indicator-name-cell {
	display: flex;
	flex-direction: column;
	gap: 4px;
	align-items: flex-start;
}
.indicator-name-input {
	width: 100%;
	padding: 6px 10px;
	border: 1px solid #ddd;
	border-radius: 4px;
	font-size: 13px;
	background: #fff;
}
.indicator-name-input:focus {
	border-color: var(--theme-color, #2196F3);
	outline: none;
}
.add-row-btn {
	display: none;
	padding: 2px 8px;
	font-size: 11px;
	color: #666;
	background: #f5f5f5;
	border: 1px dashed #ccc;
	border-radius: 3px;
	cursor: pointer;
}
.add-row-btn:hover {
	background: #e8e8e8;
	color: #333;
}
.table__wr.edit-mode .add-row-btn {
	display: inline-block;
}
.delete-indicator-btn {
	padding: 4px 8px;
	font-size: 12px;
	color: #f44336;
	background: transparent;
	border: 1px solid #f44336;
	border-radius: 4px;
	cursor: pointer;
}
.delete-indicator-btn:hover {
	background: #ffebee;
}

/* ===== 버튼 그룹 ===== */
.btn-group {
	display: flex;
	gap: 8px;
}
.btn-group .main__btn {
	padding: 8px 16px;
	border-radius: 4px;
	font-size: 13px;
	cursor: pointer;
}
.btn-group .main__btn.edit { background: var(--theme-color, #2196F3); color: #fff; }
.btn-group .main__btn.delete { background: #d32f2f; color: #fff; }
.btn-group .main__btn.secondary { background: #f5f5f5; color: #666; }

.btn__group {
	display: flex;
	gap: 8px;
	justify-content: flex-end;
	margin-top: 20px;
}

/* ===== 첨부파일 ===== */
.attachment-link {
	color: #1976d2;
	text-decoration: none;
	font-size: 12px;
}
.attachment-link:hover {
	text-decoration: underline;
}
.no-attachment {
	color: #999;
	font-size: 12px;
}
.completion-checkbox {
	width: 18px;
	height: 18px;
	cursor: pointer;
}

/* 다운로드 버튼 */
.download-btn {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 6px 12px;
	background: #f5f5f5;
	border-radius: 4px;
	color: #333;
	text-decoration: none;
	font-size: 13px;
}
.download-btn:hover {
	background: #e8e8e8;
}
.download-btn img {
	width: 16px;
	height: 16px;
}

/* ===== 파일 입력 ===== */
.file-input-wrapper {
	display: flex;
	align-items: center;
	gap: 8px;
}
.file-select-btn {
	padding: 4px 12px;
	font-size: 12px;
	background: #f5f5f5;
	border: 1px solid #ddd;
	border-radius: 4px;
	cursor: pointer;
	white-space: nowrap;
}
.file-select-btn:hover {
	background: #e8e8e8;
}
.file-name-display {
	color: #999;
	font-size: 12px;
}

/* ===== 책임자 수정 버튼 ===== */
.edit-responsible-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 4px;
	border-radius: 4px;
	transition: background 0.2s;
}
.edit-responsible-btn:hover {
	background: #f5f5f5;
}

/* ===== 멤버 리스트 ===== */
.member-item {
	display: flex;
	align-items: center;
	padding: 12px;
	border-bottom: 1px solid #E5E5EC;
	cursor: pointer;
	transition: background 0.2s;
}
.member-item:last-child {
	border-bottom: none;
}
.member-item:hover {
	background: #f5f5f5;
}
.member-item.selected {
	background: var(--theme-light, #e3f2fd);
}
.member-item .profile-img {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	object-fit: cover;
	margin-right: 12px;
}
.member-item .member-info {
	flex: 1;
}
.member-item .member-name {
	font-weight: 600;
	color: #333;
	margin-bottom: 2px;
}
.member-item .member-org {
	font-size: 12px;
	color: #999;
}
.member-item .check-mark {
	color: var(--theme-dark, #1976d2);
	font-size: 18px;
	display: none;
}
.member-item.selected .check-mark {
	display: inline;
}

/* ===== 수정 이력 ===== */
.history-list { max-height: 400px; overflow-y: auto; }
.history-item { padding: 12px; border-bottom: 1px solid #E5E5EC; }
.history-item:last-child { border-bottom: none; }
.history-item .date { font-size: 12px; color: #999; }
.history-item .action { font-weight: 600; margin: 4px 0; }
.history-item .user { font-size: 13px; color: #666; }

/* ===== 모달 숨김 ===== */
#edit-output-title-modal:not(.active),
#edit-outcome-title-modal:not(.active),
#edit-date-modal:not(.active),
#history-modal:not(.active),
#edit-detail-modal:not(.active) { display: none !important; }

/* ===== 지표 타입 섹션 ===== */
.indicator-type-section {
	margin-bottom: 32px;
}

/* ===== 지표별 POD 섹션 ===== */
.pod-section-indicator {
	margin-bottom: 24px;
}
.pod-section-indicator:last-child {
	margin-bottom: 0;
}

/* ===== 연결된 지표 태그 ===== */
.linked-indicator-tag {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 12px;
	background: var(--theme-light, #e3f2fd);
	border-radius: 16px;
	font-size: 13px;
	color: var(--theme-dark, #1976d2);
}
.linked-indicator-tag .remove-btn {
	background: none;
	border: none;
	color: var(--theme-dark, #1976d2);
	cursor: pointer;
	font-size: 16px;
	line-height: 1;
}
.linked-indicator-tag .remove-btn:hover {
	color: #d32f2f;
}

/* ===== 연결 가능한 지표 아이템 ===== */
.available-indicator-item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 12px;
	border-bottom: 1px solid #E5E5EC;
	cursor: pointer;
	transition: background 0.2s;
}
.available-indicator-item:last-child {
	border-bottom: none;
}
.available-indicator-item:hover {
	background: #f5f5f5;
}
.available-indicator-item .indicator-info {
	flex: 1;
}
.available-indicator-item .indicator-name {
	font-weight: 500;
	color: #333;
	margin-bottom: 2px;
}
.available-indicator-item .indicator-def {
	font-size: 12px;
	color: #999;
}

/* ===== 로딩/에러 ===== */
.loading, .error {
	text-align: center;
	padding: 60px 20px;
	color: #666;
}
.error { color: #f44336; }

/* ===== 지표 데이터 테이블 배경색 통일 ===== */
.table__wr tbody tr,
.table__wr tbody tr.add__list,
.table__wr tbody tr.indicator-row {
	background-color: #fff !important;
}

/* ===== 상세화면 (Output 전용) ===== */
.detail-row.deleted-row {
	opacity: 0.4;
	text-decoration: line-through;
}
.detail-row.new-row {
	background-color: #e8f5e9 !important;
}
.detail-row.clickable { cursor: pointer; }
.detail-row.clickable:hover { background-color: #f5f7fa !important; }

#detail-table-wrapper.edit-mode .detail-row:not(.new-row) {
	cursor: pointer;
}
#detail-table-wrapper.edit-mode .detail-row:not(.new-row):hover {
	background-color: #f0f7ff !important;
}
#detail-table-wrapper.edit-mode {
	border: 2px solid var(--theme-color, #2196F3);
	border-radius: 4px;
}

/* ===== 상세화면 수정 모달 (Output 전용) ===== */
#edit-detail-modal .form__group { margin-bottom: 16px; }
#edit-detail-modal .form__group label { display: block; margin-bottom: 6px; font-weight: 500; }
#edit-detail-modal textarea { min-height: 80px; resize: vertical; width: 100%; padding: 10px; border: 1px solid #E5E5EC; border-radius: 4px; }
#edit-detail-modal input[type="text"],
#edit-detail-modal input[type="date"] { width: 100%; padding: 10px; border: 1px solid #E5E5EC; border-radius: 4px; }
#edit-detail-modal select { width: 100%; border: 1px solid #E5E5EC; border-radius: 4px; }

/* Detail 담당자 다중 선택 UI */
.detail-assignee-area { margin-top: 8px; }
.detail-assignee-selected {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	padding: 8px;
	min-height: 36px;
	background: #f8f9fa;
	border-radius: 4px;
	margin-bottom: 8px;
}
.detail-assignee-selected .no-selection { color: #999; font-size: 13px; }
.detail-assignee-tag {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 4px 8px;
	background: var(--theme-light, #e3f2fd);
	border-radius: 16px;
	font-size: 13px;
	color: var(--theme-dark, #1976d2);
}
.detail-assignee-tag .remove-btn {
	background: none;
	border: none;
	color: var(--theme-dark, #1976d2);
	font-size: 16px;
	cursor: pointer;
	padding: 0 2px;
	line-height: 1;
}
.detail-assignee-tag .remove-btn:hover { color: #0d47a1; }
.detail-assignee-search-wrapper { position: relative; }
.detail-assignee-dropdown {
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	max-height: 200px;
	overflow-y: auto;
	background: #fff;
	border: 1px solid #ddd;
	border-top: none;
	border-radius: 0 0 4px 4px;
	z-index: 100;
	box-shadow: 0 4px 6px rgba(0,0,0,0.1);
}
.detail-assignee-item {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 12px;
	cursor: pointer;
	transition: background 0.15s;
}
.detail-assignee-item:hover { background: #f5f5f5; }
.detail-assignee-item.selected { background: var(--theme-light, #e3f2fd); }
.detail-assignee-item img {
	width: 32px;
	height: 32px;
	border-radius: 50%;
	object-fit: cover;
}
.detail-assignee-item .info { flex: 1; }
.detail-assignee-item .name { font-weight: 500; font-size: 14px; }
.detail-assignee-item .position { font-size: 12px; color: #666; }
.detail-assignee-item .check-mark { color: var(--theme-dark, #1976d2); font-size: 18px; }

/* 첨부파일 영역 */
.detail-attachment-area { margin-top: 8px; }
.detail-attachment-list { margin-bottom: 12px; }
.detail-attachment-item {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 8px 12px;
	background: #f8f9fa;
	border-radius: 4px;
	margin-bottom: 4px;
}
.detail-attachment-item .file-name { flex: 1; color: #333; font-size: 13px; }
.detail-attachment-item .file-name a { color: #1976d2; text-decoration: none; }
.detail-attachment-item .file-name a:hover { text-decoration: underline; }
.detail-attachment-item .delete-attachment-btn {
	background: transparent;
	border: none;
	color: #f44336;
	cursor: pointer;
	font-size: 18px;
	padding: 0 4px;
}
.detail-new-file-wrapper {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-top: 8px;
}
.detail-new-file-wrapper label {
	padding: 8px 16px;
	background: #f5f5f5;
	border: 1px solid #ddd;
	border-radius: 4px;
	cursor: pointer;
	font-size: 13px;
}
.detail-new-file-wrapper label:hover { background: #e8e8e8; }
.detail-file-name-display { color: #999; font-size: 13px; }

/* ===== 지표 데이터 테이블 (공통) ===== */
.indicator-section {
	margin-top: 24px;
}
.indicator-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 16px;
}
.indicator-table {
	width: 100%;
	border-collapse: collapse;
}
.indicator-table th,
.indicator-table td {
	padding: 12px;
	text-align: center;
	border: 1px solid #E5E5EC;
}
.indicator-table th {
	background: #f9f9f9;
	font-weight: 600;
	color: #333;
}
.indicator-table td {
	color: #666;
}
.indicator-table td.value {
	font-weight: 600;
	color: #333;
}
.indicator-table td.left-align {
	text-align: left;
}

/* ===== Outcome 모달 폼 ===== */
.form__group { margin-bottom: 16px; }
.form__group label {
	display: block;
	margin-bottom: 8px;
	font-weight: 500;
	color: #333;
}