/* upload.css — ผู้สมัครส่งเอกสารเอง (หน้า /documents) · มือถือก่อน (375px ต้องไม่ล้นแนวนอน)
   แถวเอกสาร .doc / .doc__head อยู่ใน pages.css */

.tone-info { color: var(--brand); }
.docsum.tone-info { background: var(--brand-soft); }
.doc.tone-info .doc__mark { background: var(--brand); border-color: var(--brand); }
.doc.tone-info .doc__state { color: var(--brand); }

.docsum__count { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: baseline; }
.docsum__chip {
    display: inline-block; padding: 0 10px; border-radius: 999px; font-size: .84rem; font-weight: 600; line-height: 1.8;
}
.docsum__chip--info { background: var(--surface); color: var(--brand); }
.docsum__chip--warn { background: var(--surface); color: var(--maroon); }

.doc__text { display: grid; min-width: 0; }
.doc__label { overflow-wrap: anywhere; }
.doc__detail { font-size: .84rem; color: var(--ink-2); }

/* ── ผลการส่งล่าสุด ── */
.upmsg {
    display: flex; gap: 8px; align-items: flex-start; padding: 10px 12px; border-radius: var(--r-sm);
    font-weight: 600; font-size: .93rem; overflow-wrap: anywhere;
}
.upmsg .icon { margin-top: .2em; }
.upmsg--ok { background: var(--green-soft); color: var(--green); }
.upmsg--error { background: var(--maroon-soft); color: var(--maroon); }
.upmsg--top { margin-bottom: 14px; }

/* ── เหตุผลไม่ผ่าน (ต้องเห็นชัด) ── */
.doc__reason {
    padding: 10px 12px; border-radius: var(--r-sm); background: var(--maroon-soft); color: var(--ink);
    border-left: 4px solid var(--maroon); overflow-wrap: anywhere; white-space: pre-line;
}
.doc__reason strong { color: var(--maroon); }

/* ── หน้าที่ส่งไว้ ── */
.pages { display: grid; gap: 6px; }
.pages__title { font-size: .84rem; color: var(--ink-2); font-weight: 600; }
.pages__list { list-style: none; display: grid; gap: 6px; }
.pages__item {
    display: flex; gap: 8px; align-items: center; padding: 6px 6px 6px 10px;
    border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface-2);
}
.pages__link {
    flex: 1 1 auto; min-width: 0; min-height: 44px; display: grid; grid-template-columns: auto minmax(0, 1fr);
    column-gap: 8px; align-items: center; text-decoration: none; color: var(--brand);
}
.pages__link .icon { grid-row: span 2; }
.pages__thumb {
    grid-row: span 2; width: 56px; height: 56px; border-radius: 8px; object-fit: cover;
    border: 1px solid var(--line); background: var(--surface);
}
.pages__thumb--pdf {
    display: grid; place-content: center; justify-items: center; gap: 0; color: var(--maroon);
    font-size: .7rem; font-weight: 700; line-height: 1.1;
}
.pages__thumb--pdf .icon { grid-row: auto; }
.pages__name { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-decoration: underline; }
.pages__meta { font-size: .8rem; color: var(--ink-2); }
.pages__remove { flex: none; }
.button--sm { min-height: 44px; padding: 0 14px; font-size: .9rem; }

/* ── ฟอร์มส่ง ── */
.upload {
    display: grid; gap: 8px; padding: 12px; border-radius: var(--r);
    border: 1px dashed color-mix(in srgb, var(--brand) 40%, var(--line)); background: var(--brand-soft);
}
.upload__label { display: flex; gap: 6px; align-items: center; font-weight: 600; color: var(--brand); }
.upload__input {
    width: 100%; max-width: 100%; min-width: 0; font: inherit; font-size: .9rem; color: var(--ink-2);
    padding: 6px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface);
}
.upload__input::file-selector-button {
    font: inherit; font-weight: 600; color: var(--brand); background: var(--surface);
    border: 1px solid var(--line); border-radius: 10px; padding: 8px 12px; margin-right: 10px; cursor: pointer; min-height: 40px;
}
.upload__input:focus-visible { box-shadow: var(--focus); outline: none; }
.upload__hint { font-size: .84rem; color: var(--ink-2); }

/* ── ตัวอย่างไฟล์ที่เลือก (ก่อนส่ง) ── */
.upload__preview { list-style: none; display: grid; gap: 6px; margin: 0; padding: 0; }
.upload__preview[hidden] { display: none; }
.upload__item {
    display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; align-items: center;
    padding: 6px; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface);
}
.upload__item.is-over { border-color: var(--maroon); opacity: .65; }
.upload__thumb {
    width: 72px; height: 72px; border-radius: 8px; object-fit: cover; background: var(--surface-2);
    border: 1px solid var(--line);
}
.upload__thumb--tile {
    display: grid; place-content: center; font-size: .8rem; font-weight: 700; color: var(--maroon);
}
.upload__meta { display: grid; min-width: 0; }
.upload__name { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.upload__size { font-size: .8rem; color: var(--ink-2); }
.upload__item.is-over .upload__size { color: var(--maroon); font-weight: 600; }
.upload__status { font-size: .9rem; font-weight: 600; color: var(--brand); }
.upload__status:empty { display: none; }
.upload__status.is-error { color: var(--maroon); }
.upload__submit { width: 100%; }
.upload__submit[disabled] { opacity: .7; cursor: progress; }
.upload.is-busy .upload__input { pointer-events: none; opacity: .7; }

.upload-more > summary {
    cursor: pointer; min-height: 44px; display: flex; align-items: center; font-weight: 600; color: var(--brand);
}
.upload-more[open] > summary { margin-bottom: 6px; }

@media (min-width: 640px) {
    .upload { grid-template-columns: minmax(0, 1fr) auto; align-items: end; }
    .upload > :not(.upload__submit) { grid-column: 1 / -1; }
    .upload__submit { grid-column: 2; width: auto; }
}

@media (prefers-contrast: more) {
    .pages__item, .upload { border-width: 2px; }
}

/* วิดีโอแนะนำวิธีส่งเอกสาร (การ์ด .lineguide ใช้ร่วมกับแท็บ LINE · 9 พ.ย. 69) */
.docguide { margin: 0 0 20px; }