/* screens-import.css · M9 lane I · เริ่มใช้งานและนำเข้าข้อมูล /settings/import (14-import.md §9 · templates/imports/*)
   สีจาก token เท่านั้น · ตัวอักษร ≥ 12px · ระยะ 4/8 · เป้ากด ≥ 24px · สถานะไม่ใช้สีอย่างเดียว (ไอคอน + ข้อความ) · โหลดหลัง screens-project.css */

.im-lede { max-width: 80ch; }
.im-progress .im-bar { inline-size: 100%; block-size: 12px; accent-color: var(--brand); margin: 4px 0 8px; }
.im-step h2 { margin-bottom: 8px; }
.im-kinds { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr)); gap: 12px; }
.im-kind { display: flex; flex-direction: column; gap: 4px; padding: 12px; border: 1px solid var(--line); border-radius: var(--r-md, 10px); background: var(--surf); min-inline-size: 0; }
.im-kind.im-done { border-inline-start: 4px solid var(--teal-fg); }
.im-kind-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.im-kind-name { margin: 0; font-size: 15px; display: flex; align-items: center; gap: 6px; }
.im-kind-name .ico { flex: none; color: var(--muted); }
.im-done .im-kind-name .ico { color: var(--teal-fg); }
.im-kind p { margin: 0; }
.im-kind-act { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 0; }
.im-kind-act .btn { min-height: 32px; }
.im-kind-head .chip { flex: none; white-space: nowrap; }
.im-chip-done { background: var(--teal-bg); color: var(--teal-fg); }
.im-chip-sens { background: var(--p2-bg); color: var(--p2-fg); }
.im-chip-pdpa { background: var(--soft); color: var(--fg); }
.im-flags { display: flex; flex-wrap: wrap; gap: 4px; }
.im-needs { color: var(--ink2); }
.im-needs .ico { color: var(--p2-fg); }
.im-kind-title { margin: 0 0 8px; }

.im-upload label, .im-upload fieldset { margin-bottom: 8px; }
.im-era { display: flex; flex-wrap: wrap; gap: 4px 16px; border: 1px solid var(--line); border-radius: var(--r-md, 10px); padding: 8px 12px; }
.im-radio, .im-check { display: flex; align-items: center; gap: 8px; min-height: 24px; font-weight: 500; }
.im-radio input, .im-check input { inline-size: 18px; block-size: 18px; flex: none; }
.im-missing { margin: 4px 0 0; }
.im-deps { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.im-cols code { font-size: 12px; }
.im-req { font-size: 12px; background: var(--p2-bg); color: var(--p2-fg); }

.im-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 0 0 8px; }
.im-doc { margin: 0; overflow-wrap: anywhere; }
.im-st-committed, .im-st-approved, .im-st-validated { background: var(--teal-bg); color: var(--teal-fg); }
.im-st-pending_approval, .im-st-partially_committed { background: var(--p2-bg); color: var(--p2-fg); }
.im-st-failed, .im-st-undone, .im-st-cancelled, .im-st-expired { background: var(--p1-bg); color: var(--p1-fg); }
.im-stepper { margin-block: 8px 16px; }
.im-kv { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 4px 16px; margin: 0 0 8px; }
.im-kv dd { margin: 0; min-inline-size: 0; }
.im-fname { overflow-wrap: anywhere; }
.im-counts { list-style: none; margin: 8px 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.im-counts li { display: flex; align-items: baseline; gap: 6px; padding: 8px 12px; border: 1px solid var(--line); border-radius: var(--r-md, 10px); background: var(--surf2); font-size: 13px; color: var(--ink2); }
.im-n { font-size: 20px; font-weight: 700; color: var(--ink); }
.im-c-ok { border-inline-start: 4px solid var(--teal-fg) !important; }
.im-c-warn { border-inline-start: 4px solid var(--p2-fg) !important; }
.im-c-err { border-inline-start: 4px solid var(--p1-fg) !important; }
.im-row, .im-row-valid, .im-row-committed { background: var(--teal-bg); color: var(--teal-fg); }
.im-row-warning { background: var(--p2-bg); color: var(--p2-fg); }
.im-row-error, .im-row-failed { background: var(--p1-bg); color: var(--p1-fg); }
.im-row-pending, .im-row-skipped { background: var(--soft); color: var(--fg); }
.im-issues { margin: 0; padding-inline-start: 16px; display: grid; gap: 2px; }
.im-sev-error b { color: var(--p1-fg); }
.im-key { overflow-wrap: anywhere; }
.im-filter, .im-pager { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 8px; }
.im-pager { margin: 8px 0 0; }
.im-next { border-inline-start: 4px solid var(--brand); }
.im-roles ul { margin: 4px 0 8px; padding-inline-start: 16px; }
.im-role-admin { color: var(--p1-fg); }
.im-pdpa { border: 1px solid var(--line); border-radius: var(--r-md, 10px); padding: 8px 12px; margin: 0 0 8px; display: grid; gap: 8px; }
.im-pdpa legend { display: flex; align-items: center; gap: 6px; font-weight: 600; }
.im-cancel { margin-top: 8px; }
.im-cancel summary { cursor: pointer; min-height: 24px; color: var(--ink2); }
.im-undo { border-inline-start: 4px solid var(--p1-fg); }
.im-undo-list { margin: 4px 0 8px; padding-inline-start: 16px; }
.im-undo-list .note span { overflow-wrap: anywhere; }
.im-hfilter { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px 16px; }
.im-hfilter label { display: grid; gap: 4px; min-inline-size: min(100%, 12rem); }
.im-hfilter .actions { margin: 0; }

@media (max-width: 640px) {
  .im-kv { grid-template-columns: minmax(0, 1fr); }
  .im-kv dt { font-size: 12px; }
  .im-kind-act .btn { flex: 1 1 auto; justify-content: center; }
  .im-hfilter label { min-inline-size: 100%; }
}

/* คำถามครั้งแรก "เลขในเอกสาร/PDF" (M11 · README ข้อ 391) · ตัวเลือกเป็นการ์ดสองใบ · เป้ากด ≥ 24px · ไม่เลือกให้ก่อน (คำแนะนำเป็นป้าย ไม่ใช่ค่าเริ่ม) */
.im-digits { border-inline-start: 4px solid var(--brand); }
.im-digits-set { border: 0; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); gap: 8px; }
.im-digits-set legend { font-weight: 600; margin-bottom: 4px; }
.im-digits-opt { display: flex; align-items: flex-start; gap: 8px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r-md, 10px); background: var(--surf); cursor: pointer; min-inline-size: 0; }
.im-digits-opt input[type="radio"] { inline-size: 24px; block-size: 24px; margin: 0; accent-color: var(--brand); flex: none; }
.im-digits-opt:has(input:checked) { border-color: var(--brand); box-shadow: 0 0 0 1px var(--brand); }
.im-digits-opt small { display: block; font-size: 13px; margin-top: 2px; }
.im-digits-set > small { grid-column: 1 / -1; }