/**
 * 添付書類（会員側・PR2）の見た目。
 *
 * 🔴 `mitsukuru-design` に準拠＝グリーン（#7CB342 / #689A38 / #EFF6E4）・Noto Sans JP・
 *    白基調にグリーンの差し色・ボタンはピル型・角丸 12〜16px。**新しい色は足さない。**
 * 🔴 **スマホ幅（640px 未満）で横スクロールを出さない**＝表をやめてカード積みにする
 *    （各セルの見出しは `td[data-label]` を `::before` で出す）。
 * ⚠️ 種別バッジの6色は `PNM_Attachment_Types::colors()` と同じ値（増やすときは両方直す）。
 * ⚠️ マイページのカード枠（`.pnm-mypage__card`）は `assets/css/pnm-mypage.css` の担当＝ここでは触らない。
 */

.pnm-att {
	--pnm-att-green: #7CB342;
	--pnm-att-green-dark: #689A38;
	--pnm-att-green-light: #EFF6E4;
	--pnm-att-text: #2B2B2B;
	--pnm-att-muted: #6B7280;
	--pnm-att-border: #E5E7EB;
	font-family: 'Noto Sans JP', sans-serif;
	color: var(--pnm-att-text);
}

.pnm-att__note,
.pnm-att__hint,
.pnm-att__empty {
	margin: 8px 0 0;
	font-size: 13px;
	line-height: 1.7;
	color: var(--pnm-att-muted);
}

/* --- 送る欄 ------------------------------------------------------------- */

.pnm-att__box {
	margin: 16px 0 0;
	padding: 16px;
	border: 1px solid var(--pnm-att-border);
	border-radius: 16px;
	background: #ffffff;
}

.pnm-att__field {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.pnm-att__label {
	font-size: 14px;
	font-weight: 700;
}

/* 🔴 `font-size` は 16px 未満にしない（iOS Safari がフォーカス時に自動ズームする＝handoff「既知の地雷：フォームと iOS」）。 */
.pnm-att__select {
	width: 100%;
	max-width: 320px;
	padding: 10px 12px;
	font-size: 16px;
	color: var(--pnm-att-text);
	background: #ffffff;
	border: 1px solid var(--pnm-att-border);
	border-radius: 8px;
}

.pnm-att__select:focus {
	outline: 2px solid var(--pnm-att-green);
	outline-offset: 1px;
}

.pnm-att__drop {
	margin: 16px 0 0;
	padding: 24px 16px;
	text-align: center;
	background: var(--pnm-att-green-light);
	border: 2px dashed #D5E5BC;
	border-radius: 16px;
}

.pnm-att__drop.is-over {
	border-color: var(--pnm-att-green);
	background: #E7F2D6;
}

.pnm-att__droptext {
	margin: 0 0 12px;
	font-size: 14px;
	color: var(--pnm-att-muted);
}

.pnm-att__pick {
	display: inline-block;
	cursor: pointer;
}

/* ⚠️ `display:none` にしない（キーボードで辿れなくなる）＝見えない大きさで重ねる。 */
.pnm-att__file {
	position: absolute;
	/* 🔴 16px 未満にしない（iOS Safari の自動ズーム対策。見えない欄でも規則どおりにそろえる）。 */
	font-size: 16px;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	border: 0;
}

.pnm-att__pickbtn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: 12px 28px;
	font-size: 15px;
	font-weight: 800;
	color: #ffffff;
	background: var(--pnm-att-green);
	border-radius: 9999px;
	box-shadow: 0 8px 20px rgba(124, 179, 66, 0.30);
}

.pnm-att__pick:hover .pnm-att__pickbtn {
	background: var(--pnm-att-green-dark);
}

.pnm-att__file:focus + .pnm-att__pickbtn {
	outline: 2px solid var(--pnm-att-green-dark);
	outline-offset: 2px;
}

.pnm-att__error {
	margin: 12px 0 0;
	padding: 10px 12px;
	font-size: 13.5px;
	line-height: 1.7;
	color: #A23434;
	background: #FCE9E9;
	border-radius: 8px;
}

/* --- 進捗 --------------------------------------------------------------- */

.pnm-att__queue {
	margin: 12px 0 0;
	padding: 0;
	list-style: none;
}

.pnm-att__qrow {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	align-items: center;
	padding: 8px 0;
	font-size: 13px;
	border-top: 1px solid var(--pnm-att-border);
}

.pnm-att__qname {
	flex: 1 1 140px;
	min-width: 0;
	overflow-wrap: anywhere;
}

.pnm-att__bar {
	flex: 1 1 120px;
	min-width: 80px;
	height: 6px;
	overflow: hidden;
	background: var(--pnm-att-border);
	border-radius: 9999px;
}

.pnm-att__barin {
	display: block;
	width: 0;
	height: 100%;
	background: var(--pnm-att-green);
	transition: width 0.2s linear;
}

.pnm-att__qstate {
	flex: 0 0 auto;
	color: var(--pnm-att-muted);
}

.pnm-att__qrow--done .pnm-att__qstate {
	color: var(--pnm-att-green-dark);
	font-weight: 700;
}

.pnm-att__qrow--fail .pnm-att__barin {
	background: #A23434;
}

.pnm-att__qrow--fail .pnm-att__qstate {
	color: #A23434;
	font-weight: 700;
}

/* --- 一覧 --------------------------------------------------------------- */

.pnm-att__list {
	margin: 16px 0 0;
}

.pnm-att__table {
	width: 100%;
	border-collapse: collapse;
	font-size: 14px;
	table-layout: fixed;
}

.pnm-att__table th,
.pnm-att__table td {
	padding: 10px 8px;
	text-align: left;
	vertical-align: middle;
	border-bottom: 1px solid var(--pnm-att-border);
	overflow-wrap: anywhere;
}

.pnm-att__table th {
	font-size: 12.5px;
	font-weight: 700;
	color: var(--pnm-att-muted);
	white-space: nowrap;
}

.pnm-att__file-cell {
	display: flex;
	gap: 8px;
	align-items: center;
	min-width: 0;
}

.pnm-att__name {
	min-width: 0;
	color: var(--pnm-att-text);
	overflow-wrap: anywhere;
}

a.pnm-att__name {
	color: #5C8A2E;
	font-weight: 700;
	text-decoration: underline;
}

.pnm-att__ico {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 28px;
	font-size: 10px;
	font-weight: 800;
	letter-spacing: 0.02em;
	color: #4A5046;
	background: #EEF0EC;
	border-radius: 6px;
}

.pnm-att__ico--pdf {
	color: #A23434;
	background: #FCE9E9;
}

.pnm-att__ico--excel {
	color: #4F7A26;
	background: var(--pnm-att-green-light);
}

.pnm-att__ico--word {
	color: #2A5B8C;
	background: #E6F0FA;
}

.pnm-att__ico--image {
	color: #65408F;
	background: #F1EAF8;
}

.pnm-att__thumbbtn {
	flex: 0 0 auto;
	padding: 0;
	background: none;
	border: 0;
	border-radius: 6px;
	cursor: zoom-in;
	line-height: 0;
}

.pnm-att__thumb {
	width: 48px;
	height: 48px;
	object-fit: cover;
	border: 1px solid var(--pnm-att-border);
	border-radius: 6px;
}

.pnm-att__badge {
	display: inline-block;
	padding: 3px 10px;
	font-size: 12px;
	font-weight: 700;
	white-space: nowrap;
	border-radius: 9999px;
}

.pnm-att__badge--green {
	color: #4F7A26;
	background: #EFF6E4;
}

.pnm-att__badge--blue {
	color: #2A5B8C;
	background: #E6F0FA;
}

.pnm-att__badge--orange {
	color: #9A5A12;
	background: #FDF0E1;
}

.pnm-att__badge--purple {
	color: #65408F;
	background: #F1EAF8;
}

.pnm-att__badge--red {
	color: #A23434;
	background: #FCE9E9;
}

.pnm-att__badge--gray {
	color: #4A5046;
	background: #EEF0EC;
}

.pnm-att__del {
	min-height: 32px;
	padding: 6px 14px;
	font-size: 13px;
	font-weight: 700;
	color: #A23434;
	background: #ffffff;
	border: 1px solid #E6C5C5;
	border-radius: 9999px;
	cursor: pointer;
}

.pnm-att__del:hover {
	background: #FCE9E9;
}

.pnm-att__del[disabled] {
	opacity: 0.6;
	cursor: default;
}

.pnm-att__dash {
	color: var(--pnm-att-muted);
}

/* --- 折りたたみ（マイページのカードの中） -------------------------------- */

.pnm-att-fold {
	margin: 16px 0 0;
	border: 1px solid var(--pnm-att-border);
	border-radius: 16px;
	background: #ffffff;
}

.pnm-att-fold__sum {
	padding: 14px 16px;
	font-size: 15px;
	font-weight: 700;
	cursor: pointer;
	list-style: none;
}

.pnm-att-fold__sum::-webkit-details-marker {
	display: none;
}

.pnm-att-fold__sum::after {
	content: '\25BC';
	float: right;
	font-size: 11px;
	color: #6B7280;
}

.pnm-att-fold[open] > .pnm-att-fold__sum::after {
	content: '\25B2';
}

.pnm-att-fold > .pnm-att {
	padding: 0 16px 16px;
}

/* --- 拡大表示 ------------------------------------------------------------ */

.pnm-att-modal {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 16px;
	background: rgba(0, 0, 0, 0.72);
}

.pnm-att-modal[hidden] {
	display: none;
}

.pnm-att-modal__inner {
	max-width: 100%;
	max-height: 100%;
	padding: 16px;
	overflow: auto;
	text-align: center;
	background: #ffffff;
	border-radius: 16px;
}

.pnm-att-modal__name {
	margin: 0 0 12px;
	font-size: 13px;
	overflow-wrap: anywhere;
	color: #6B7280;
}

.pnm-att-modal__img {
	max-width: 100%;
	max-height: 70vh;
	border-radius: 8px;
}

.pnm-att-modal__close {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	margin: 16px 0 0;
	padding: 12px 28px;
	font-size: 15px;
	font-weight: 700;
	color: #5C8A2E;
	background: #ffffff;
	border: 2px solid #7CB342;
	border-radius: 9999px;
	cursor: pointer;
}

/* --- スマホ（640px 未満）＝表をカード積みにする -------------------------- */

@media screen and (max-width: 639px) {

	.pnm-att__table,
	.pnm-att__table tbody,
	.pnm-att__table tr,
	.pnm-att__table td {
		display: block;
		width: auto;
	}

	.pnm-att__table thead {
		display: none;
	}

	.pnm-att__table tr {
		padding: 12px 0;
		border-bottom: 1px solid var(--pnm-att-border);
	}

	.pnm-att__table td {
		display: flex;
		gap: 8px;
		align-items: flex-start;
		padding: 3px 0;
		border: 0;
	}

	.pnm-att__table td[data-label]::before {
		flex: 0 0 5.5em;
		font-size: 12px;
		font-weight: 700;
		color: var(--pnm-att-muted);
		content: attr(data-label);
	}
}

/* --------------------------------------------------------------------------
 * 管理画面（社内側・PR3）
 *
 * ⚠️ 会員側と同じ `.pnm-att*` を使い回す。ここは管理画面だけの上書きと追加。
 * ⚠️ wp-admin の `.widefat` に乗せるので、表そのものの見た目は WordPress に任せる。
 * -------------------------------------------------------------------------- */

.pnm-att--admin {
	max-width: 760px;
	margin: 8px 0 16px;
}

.pnm-att-adm__h {
	margin-top: 24px;
}

.pnm-att-adm__req {
	display: inline-block;
	margin-left: 8px;
	padding: 2px 10px;
	font-size: 12px;
	font-weight: 700;
	vertical-align: middle;
	border-radius: 9999px;
}

.pnm-att-adm__req--ok {
	color: #4F7A26;
	background: #EFF6E4;
}

.pnm-att-adm__req--ng {
	color: #A23434;
	background: #FCE9E9;
}

.pnm-att-adm__table {
	margin: 8px 0 12px;
}

/* 削除済みの行は薄く出す（行もファイルも残っている＝管理者は開ける）。 */
.pnm-att-adm__row--deleted {
	opacity: 0.55;
}

.pnm-att-adm__deleted {
	display: block;
	margin-top: 4px;
	font-size: 12px;
	color: #A23434;
}

.pnm-att-adm__gone {
	color: #A23434;
}

.pnm-att-adm__form {
	display: inline;
}

.pnm-att-adm__notify {
	margin: 0 0 16px;
}

.pnm-att-adm__filters {
	margin: 12px 0;
}

/* 管理画面ではサムネイルを小さく（表の行が高くなりすぎないように）。 */
.pnm-att-adm__table .pnm-att__thumb {
	width: 36px;
	height: 36px;
}

/* --------------------------------------------------------------------------
 * 各フローへの組み込み（PR4・2026-10-01）
 *
 * ⚠️ 欄そのものの見た目は上の `.pnm-att*` を使い回す。ここは見出しと注記だけ。
 * -------------------------------------------------------------------------- */

/* ご依頼の詳細（提案書の下）。本文の幅（960px）に合わせる。 */
.pnm-att-detail {
	max-width: 960px;
	margin: 32px auto 0;
	padding: 0 12px;
	font-family: 'Noto Sans JP', sans-serif;
}

.pnm-att-detail__h,
.pnm-att-app__h {
	margin: 0 0 8px;
	font-size: 20px;
	font-weight: 700;
}

/* 補助金 申請文章（`#pnm-app-root` の外に置く兄弟）。 */
.pnm-att-app {
	max-width: 1000px;
	margin: 32px auto 0;
	padding: 0 16px 40px;
	font-family: 'Noto Sans JP', sans-serif;
}

/* 「必須書類 n/m」。そろっていれば緑、足りなければ赤。 */
.pnm-att-app__req {
	margin: 0 0 8px;
	font-size: 14px;
	font-weight: 700;
}

.pnm-att-app__req.is-ok {
	color: #4F7A26;
}

.pnm-att-app__req.is-ng {
	color: #A23434;
}

.pnm-att-app__miss {
	font-weight: 400;
}

/* 「未提出の必須書類：…」（SP のマイページのカード）。 */
.pnm-att__missing {
	margin: 8px 0 0;
	padding: 10px 12px;
	font-size: 13.5px;
	font-weight: 700;
	line-height: 1.7;
	color: #A23434;
	background: #FCE9E9;
	border-radius: 8px;
}