.pc-form { margin-bottom: 18px; }
.pc-form .form-group { margin-bottom: 14px; }
.pc-form label { font-size: 13px; font-weight: bold; margin-bottom: 4px; color: #2c3e50; }
.pc-form > .form-group > label { display: block; }
.pc-form input.form-control { max-width: 420px; }
.pc-status { margin-left: 10px; font-size: 13px; color: #777; }

.pc-ports { display: flex; flex-wrap: wrap; gap: 14px; }
.pc-group { flex: 1 1 260px; border: 1px solid #ddd; border-radius: 3px; padding: 8px 10px; }
.pc-group-title { font-size: 12px; font-weight: bold; color: #777; margin-bottom: 6px; padding-bottom: 4px; border-bottom: 1px solid #eee; }
.pc-port { display: block; font-weight: normal; font-size: 13px; margin-bottom: 3px; cursor: pointer; }
.pc-port input { margin-right: 5px; }
.pc-num { font-family: monospace; display: inline-block; min-width: 42px; color: #2c3e50; }
.pc-name { font-weight: bold; margin-right: 6px; }
.pc-desc { font-size: 11px; color: #888; }
.pc-actions { margin-top: 8px; }
.pc-actions .btn { margin-right: 4px; }

.pc-group-locked { border-color: #d9c8a9; background: #fdfaf4; }
.pc-unlocked-mark { font-size: 10px; font-weight: normal; color: #8a6d3b; border: 1px solid #e0cfa8; background: #fcf8e3; border-radius: 2px; padding: 1px 5px; margin-left: 5px; }

/* 解錠の有無にかかわらず、実行ボタンの上に間隔を空ける。
   解錠すると解錠欄が消えるため、ボタン側に余白を持たせる。 */
.pc-submit-row { margin-top: 18px; padding-top: 14px; border-top: 1px solid #eee; }

.pc-locked-state { margin-top: 16px; border-top: 1px dashed #ddd; padding-top: 12px; }
.pc-locked-label { font-size: 12px; color: #8a6d3b; background: #fcf8e3; border: 1px solid #faebcc; border-radius: 3px; padding: 3px 8px; margin-right: 8px; }

.pc-unlock { margin-top: 16px; border-top: 1px dashed #ddd; padding-top: 12px; }
.pc-unlock-row { display: flex; gap: 6px; max-width: 420px; }
.pc-unlock-row input.form-control { flex: 1 1 auto; }
.pc-unlock-note { font-size: 11px; color: #888; margin-top: 4px; }
.pc-unlock-error { margin-top: 6px; font-size: 12px; color: #a94442; }

.pc-error { padding: 10px 12px; margin-bottom: 14px; border: 1px solid #ebccd1; background: #f2dede; color: #a94442; font-size: 13px; border-radius: 3px; }
.pc-summary { padding: 10px 12px; margin-bottom: 14px; border: 1px solid #ddd; background: #f5f5f5; font-size: 14px; font-weight: bold; border-radius: 3px; }
.pc-summary.pc-has-open { background: #dff0d8; border-color: #d6e9c6; color: #3c763d; }

.pc-table { width: 100%; border-collapse: collapse; margin-bottom: 12px; font-size: 13px; }
.pc-table th { background: #f5f5f5; padding: 7px 10px; border: 1px solid #ddd; font-weight: bold; white-space: nowrap; text-align: left; }
.pc-table td { padding: 7px 10px; border: 1px solid #ddd; vertical-align: top; }
.pc-cell-port { font-family: monospace; white-space: nowrap; width: 70px; }
.pc-cell-svc { white-space: nowrap; }
.pc-cell-desc { display: block; font-size: 11px; color: #888; font-weight: normal; }
.pc-cell-status { white-space: nowrap; width: 110px; font-weight: bold; }
.pc-cell-ms { font-family: monospace; white-space: nowrap; width: 80px; color: #777; }

.pc-open { color: #3c763d; }
.pc-closed { color: #777; }
.pc-filtered { color: #8a6d3b; }

.pc-ipinfo { font-size: 12px; color: #777; font-family: monospace; word-break: break-all; }

@media (max-width: 600px) {
	.pc-form input.form-control { max-width: 100%; }
	.pc-ports { display: block; }
	.pc-group { margin-bottom: 10px; }
	.pc-cell-svc, .pc-cell-status { white-space: normal; }
}