/* downloads.css — หน้า "ดาวน์โหลด" แบบ B (Mai 30 ต.ค. 69 · มอคอัพ Temp/612_dl_mk_b) · สี/ขนาดจาก pm-theme.css */
[hidden] { display: none !important; }
.dl-main { padding-top: 16px; padding-bottom: 32px; max-width: 1600px; margin: 0 auto; width: 100%; }

/* ---------- Packman Tool: แถวเดียว + ลิ้นชัก ---------- */
.dl-tool-row { display: flex; align-items: center; gap: 16px; padding: 12px 16px; flex-wrap: wrap; }
.dl-tool-row .nm { font-size: var(--pm-fs-h); font-weight: 700; white-space: nowrap; margin: 0; }
.dl-tool-row .meta { font-size: var(--pm-fs-sm); color: var(--pm-t2); white-space: nowrap; }
.dl-tool-row .pm-right { margin-left: auto; display: flex; gap: 8px; align-items: center; }
.dl-tool-row .dl-get { height: 48px; padding: 0 24px; }
.dl-skel-in { color: var(--pm-t3); font-size: var(--pm-fs-sm); }
.st-msg { font-size: var(--pm-fs-sm); color: var(--pm-t2); }
.st-msg:empty { display: none; }
.st-msg.ok { color: var(--pm-ok); font-weight: 700; }
.st-msg.err { color: var(--pm-bad); font-weight: 700; }
.st-err { margin: 0 16px 12px; background: var(--pm-bad-soft); color: var(--pm-bad); border-radius: var(--pm-r); padding: 8px 12px; font-size: var(--pm-fs-sm); }
.dl-arrow { display: inline-block; transition: transform .25s; }
.dl-tg.open .dl-arrow { transform: rotate(180deg); }
.dl-drawer { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .25s; border-top: 1px solid transparent; }
.dl-drawer.open { grid-template-rows: 1fr; border-top-color: var(--pm-line); }
.dl-drawer > div { overflow: hidden; }
.dl-drawer .dl-in { padding: 16px; display: grid; grid-template-columns: 1fr 1fr; gap: 24px; font-size: var(--pm-fs-sm); }
.dl-drawer h4 { margin: 0 0 8px; font-size: var(--pm-fs-sm); color: var(--pm-blue-ink); }
.dl-drawer ul, .dl-drawer ol { margin: 0; padding-left: 24px; color: var(--pm-t2); display: flex; flex-direction: column; gap: 4px; }
.dl-drawer small { display: block; color: var(--pm-t3); font-size: var(--pm-fs-xs); }

/* ---------- การ์ดไฟล์ทั้งหมด (ทั้งใบเป็นที่วางไฟล์) ---------- */
.dl-files { position: relative; overflow: visible; }
.dl-files > .pm-hd { border-radius: var(--pm-r-card) var(--pm-r-card) 0 0; }
.dl-count { font-size: var(--pm-fs-xs); color: var(--pm-t3); font-weight: 700; }
.dl-count:empty { display: none; }
.dl-tb { display: flex; align-items: center; gap: 16px; padding: 12px 16px; border-bottom: 1px solid var(--pm-line); }
.dl-tb .pm-right { margin-left: auto; display: flex; gap: 8px; align-items: center; }
.dl-q { width: 320px; }
.dl-ov { position: absolute; inset: 0; background: var(--pm-blue-soft); border: 3px dashed var(--pm-blue); border-radius: var(--pm-r-card);
  display: none; flex-direction: column; align-items: center; justify-content: center; gap: 8px; color: var(--pm-blue-ink); z-index: 3; opacity: .96; pointer-events: none; }
.dl-ov .big { font-size: var(--pm-fs-n); font-weight: 700; }
.dl-ov small { font-size: var(--pm-fs-sm); }
.dl-files.over .dl-ov { display: flex; animation: dlpop .15s ease-out; }
@keyframes dlpop { from { transform: scale(.98); opacity: 0; } to { transform: none; opacity: .96; } }

.dl-empty { padding: 32px 16px; text-align: center; color: var(--pm-t3); font-size: var(--pm-fs-sm); }
.dl-err { margin: 12px 16px; display: flex; align-items: center; gap: 12px; background: var(--pm-bad-soft); color: var(--pm-bad); padding: 8px 12px; border-radius: var(--pm-r); font-size: var(--pm-fs-sm); }
.dl-err .pm-btn { margin-left: auto; }

/* ตาราง 1 บรรทัด/ไฟล์ · หัวตารางใหญ่ขึ้น (ทีมตรวจ) */
.dl-files .pm-table th { font-size: var(--pm-fs-sm); padding: 12px; }
.dl-files .pm-table td { vertical-align: middle; }
.dl-files .pm-table td.nm { width: 100%; max-width: 0; }
.dl-files .pm-table td.no { color: var(--pm-t3); }
.dl-files .pm-table td.act { text-align: right; width: 1%; }
.dl-files .pm-table td.act .pm-btn { height: 32px; padding: 0 12px; }
.dl-nmw { display: flex; align-items: center; gap: 12px; min-width: 0; }
.dl-fi { flex: none; display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: var(--pm-r); font-size: var(--pm-fs-sm); background: var(--pm-hover); }
.dl-fi.pdf { background: var(--pm-bad-soft); } .dl-fi.img { background: var(--pm-blue-soft); } .dl-fi.xls { background: var(--pm-ok-soft); }
.dl-fi.zip { background: var(--pm-warn-soft); } .dl-fi.doc { background: var(--pm-blue-pale); }
.dl-fn { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--pm-blue-ink); font-weight: 700; text-decoration: none; cursor: pointer; }
.dl-fn:hover { text-decoration: underline; }
.dl-st { flex: none; font-size: var(--pm-fs-xs); color: var(--pm-t2); }
.dl-st:empty { display: none; }
.dl-st.ok { color: var(--pm-ok); font-weight: 700; } .dl-st.err { color: var(--pm-bad); font-weight: 700; white-space: normal; }
.pm-btn.dl-del { color: var(--pm-bad); }

/* แถวกำลังอัป */
.dl-up td { background: var(--pm-blue-soft); }
.dl-up .dl-fn { color: var(--pm-t1); cursor: default; }
.dl-up .dl-fn:hover { text-decoration: none; }
.dl-pg { display: flex; align-items: center; gap: 12px; min-width: 240px; font-variant-numeric: tabular-nums; }
.dl-bar { flex: 1; height: 8px; border-radius: 4px; background: var(--pm-card); overflow: hidden; }
.dl-bar i { display: block; height: 100%; width: 0; border-radius: 4px; transition: width .3s;
  background: linear-gradient(90deg, var(--pm-blue), var(--pm-blue-pale), var(--pm-blue)); background-size: 200% 100%; animation: dlsh 1.2s linear infinite; }
@keyframes dlsh { to { background-position: -200% 0; } }
.dl-up.wait .dl-bar i { animation: none; }
.dl-up.done td { background: var(--pm-ok-soft); }
.dl-up.done .dl-bar i { animation: none; background: var(--pm-ok); }
.dl-up.err td { background: var(--pm-bad-soft); }
.dl-upmsg { color: var(--pm-t2); font-size: var(--pm-fs-sm); }
.dl-up.err .dl-upmsg { color: var(--pm-bad); font-weight: 700; white-space: normal; }
.dl-up.done .dl-upmsg { color: var(--pm-ok); font-weight: 700; }

/* จอแคบ */
@media (max-width: 760px) {
  .dl-drawer .dl-in { grid-template-columns: 1fr; }
  .dl-tb { flex-wrap: wrap; }
  .dl-q { width: 100%; }
  .dl-files .pm-table th.c-by, .dl-files .pm-table td.c-by, .dl-files .pm-table th.c-when, .dl-files .pm-table td.c-when { display: none; }
}