/* Data Center 43 แฟ้ม — แจ้งสถานะและเอฟเฟกต์ระหว่างโหลด (ทุกหน้า รวมหน้าเข้าสู่ระบบ)
   ลวดลายหลัก: ดอกลำดวน (ดอกไม้ประจำจังหวัดศรีสะเกษ กลีบ 6 กลีบ) ใช้ในหน้าจอโหลดและเครื่องหมายบันทึกสำเร็จ
   เคารพการตั้งค่า "ลดการเคลื่อนไหว" · สีจากชุดสีของระบบ (สว่าง/มืด) */

/* ---------- กล่องแจ้งสถานะ (toast) มุมขวาบน ---------- */
.dc-toasts { position: fixed; top: 70px; right: 16px; z-index: 3000; display: grid; gap: 10px; width: min(390px, calc(100vw - 32px)); pointer-events: none; }
body.dc.auth .dc-toasts { top: 16px; }
.toast { --tc: var(--dc-blue); position: relative; display: grid; grid-template-columns: 30px minmax(0, 1fr) 28px; gap: 4px 12px; align-items: start; padding: 12px 10px 14px 12px; overflow: hidden;
  border: 1px solid var(--dc-line); border-left: 5px solid var(--tc); border-radius: 12px; background: var(--dc-surface); color: var(--dc-ink); box-shadow: 0 14px 34px rgba(16, 40, 30, .16); pointer-events: auto; }
.toast.t-ok { --tc: var(--dc-forest); } .toast.t-warn { --tc: var(--dc-amber); } .toast.t-bad { --tc: var(--dc-brick); }
.t-ic { position: relative; width: 30px; height: 30px; border-radius: 50%; background: var(--tc); color: var(--dc-surface); display: grid; place-items: center; font-weight: 700; font-size: 16px; line-height: 1; }
.t-ok .t-ic::after { content: '✓'; } .t-bad .t-ic::after { content: '!'; } .t-warn .t-ic::after { content: '!'; } .t-info .t-ic::after { content: 'i'; font-style: italic; font-family: Georgia, serif; }
.t-b { min-width: 0; }
.t-h { display: block; font-size: .96rem; line-height: 1.35; }
.dc-content .toast .note, .toast .note { margin: 2px 0 0; padding: 0; border: 0; border-radius: 0; background: none; color: var(--dc-ink-2); font-size: .88rem; line-height: 1.5; overflow-wrap: anywhere; }
.t-act { grid-column: 2; display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.t-x { appearance: none; width: 28px; height: 28px; border: 0; border-radius: 8px; background: none; color: var(--dc-ink-2); font: inherit; font-size: 1.3rem; line-height: 1; cursor: pointer; }
.t-x:hover { background: var(--dc-line-2); color: var(--dc-ink); }
.t-bar { position: absolute; left: 0; bottom: 0; width: 100%; height: 3px; background: var(--tc); opacity: .55; transform-origin: left center; }
.toast.t-warn .t-bar, .toast.t-bad .t-bar, .toast.sticky .t-bar { display: none; }
/* ok/info หายเองใน 7 วินาที (ชี้เมาส์ค้างหรือโฟกัสเพื่อหยุด) · warn/bad อยู่จนกดปิด */
.toast.t-ok:not(.sticky), .toast.t-info:not(.sticky) { animation: toast-in .32s ease-out, toast-out .35s ease-in 7s forwards; }
.toast.t-ok:not(.sticky) .t-bar, .toast.t-info:not(.sticky) .t-bar { animation: toast-bar 7s linear forwards; }
.toast.t-warn, .toast.t-bad, .toast.sticky { animation: toast-in .32s ease-out; }
.toast.t-bad { animation: toast-in .32s ease-out, toast-nudge .42s ease-in-out .32s; }
.toast.hold, .toast.hold .t-bar { animation-play-state: paused; }
.toast.leaving { animation: toast-out .28s ease-in forwards !important; }
/* บันทึกสำเร็จ: กลีบลำดวน 6 กลีบบานรอบเครื่องหมายถูก */
.t-ok .t-ic::before { content: ''; position: absolute; left: 50%; top: 50%; width: 6px; height: 6px; margin: -3px 0 0 -3px; border-radius: 50%; opacity: 0;
  box-shadow: 0 -21px 0 0 var(--dc-lamduan), 18px -10px 0 0 var(--dc-lamduan), 18px 10px 0 0 var(--dc-lamduan), 0 21px 0 0 var(--dc-lamduan), -18px 10px 0 0 var(--dc-lamduan), -18px -10px 0 0 var(--dc-lamduan); animation: t-bloom .7s ease-out .15s; }
@keyframes toast-in { from { opacity: 0; transform: translateX(28px) scale(.97); } }
@keyframes toast-out { to { opacity: 0; transform: translateX(28px); visibility: hidden; } }
@keyframes toast-bar { to { transform: scaleX(0); } }
@keyframes toast-nudge { 25% { transform: translateX(-6px); } 50% { transform: translateX(5px); } 75% { transform: translateX(-3px); } }
@keyframes t-bloom { 0% { opacity: 1; transform: scale(.2); } 70% { opacity: 1; } 100% { opacity: 0; transform: scale(1.15); } }

/* ---------- แถบความคืบหน้าบนสุด (เปลี่ยนหน้า / ส่งแบบฟอร์ม) ---------- */
#dc-progress { position: fixed; top: 0; left: 0; right: 0; z-index: 4000; height: 3px; pointer-events: none; opacity: 0; transition: opacity .35s; }
#dc-progress.on { opacity: 1; }
#dc-progress > i { display: block; width: 0; height: 100%; border-radius: 0 3px 3px 0; background: linear-gradient(90deg, var(--dc-forest), var(--dc-lamduan), var(--dc-forest)); background-size: 200% 100%; box-shadow: 0 0 10px var(--dc-lamduan); transition: width .3s ease-out; animation: pg-flow 1.1s linear infinite; }
@keyframes pg-flow { to { background-position: -200% 0; } }

/* ---------- ปุ่มระหว่างบันทึก ---------- */
.is-busy { pointer-events: none; cursor: progress; }
.btn.is-busy, button.is-busy { opacity: .9; }
.is-busy::before { content: ''; display: inline-block; flex: none; width: .95em; height: .95em; margin-right: .45em; vertical-align: -.12em; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: dc-spin .7s linear infinite; }
form[aria-busy="true"] { cursor: progress; }
@keyframes dc-spin { to { transform: rotate(360deg); } }
/* เข้าสู่ระบบไม่สำเร็จ: กล่องสั่นเบา ๆ หนึ่งครั้ง */
.card.shake { animation: dc-shake .45s ease-in-out 1; }
@keyframes dc-shake { 20% { transform: translateX(-8px); } 40% { transform: translateX(7px); } 60% { transform: translateX(-5px); } 80% { transform: translateX(3px); } }

/* ---------- หน้าจอโหลด: ดอกลำดวนแห่งข้อมูล (หน้าที่คำนวณนาน: แดชบอร์ด ห้อง 3 มิติ War Room วิเคราะห์ตัวชี้วัด เปรียบเทียบ) ---------- */
.dc-loader { position: fixed; inset: 0; z-index: 3500; display: grid; place-items: center; padding: 16px; background: rgba(9, 28, 20, .38); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); animation: ld-in .25s ease-out; }
.ld-card { display: grid; justify-items: center; gap: 6px; width: min(340px, 100%); padding: 24px 22px 18px; border: 1px solid var(--dc-line); border-radius: 22px; background: var(--dc-surface); color: var(--dc-ink); text-align: center; box-shadow: 0 24px 60px rgba(9, 28, 20, .3); }
.ld-flower { position: relative; width: 148px; height: 148px; margin-bottom: 6px; }
.ld-petal { position: absolute; left: 50%; top: 50%; width: 30px; height: 56px; margin: -56px 0 0 -15px; border-radius: 50% 50% 46% 46% / 62% 62% 38% 38%; transform-origin: 50% 100%; transform: rotate(var(--r, 0deg));
  background: var(--dc-lamduan); background: linear-gradient(180deg, var(--dc-lamduan), color-mix(in srgb, var(--dc-lamduan) 55%, var(--dc-surface))); box-shadow: inset 0 -6px 10px rgba(120, 90, 0, .18); opacity: .95; }
.ld-petal.in { width: 24px; height: 44px; margin: -44px 0 0 -12px; background: var(--dc-lamduan); background: linear-gradient(180deg, color-mix(in srgb, var(--dc-lamduan) 70%, #fff), var(--dc-lamduan)); }
.ld-core { position: absolute; left: 50%; top: 50%; width: 46px; height: 46px; margin: -23px 0 0 -23px; border-radius: 50%; display: grid; place-items: center; background: var(--dc-forest); color: var(--dc-forest-ink); font-weight: 700; font-size: .95rem; letter-spacing: .02em; box-shadow: 0 0 0 5px color-mix(in srgb, var(--dc-forest) 25%, transparent); }
.ld-spark { position: absolute; left: 50%; top: 50%; width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px; border-radius: 50%; background: var(--sc, var(--dc-forest)); opacity: 0; }
.ld-t { margin: 4px 0 0; font-weight: 600; font-size: 1.02rem; }
.ld-tip { min-height: 2.9em; margin: 0; color: var(--dc-ink-2); font-size: .88rem; line-height: 1.45; }
.ld-tip.swap { animation: ld-tip .45s ease-out; }
.ld-slow { margin: 4px 0 0; color: var(--dc-ink-2); font-size: .78rem; }
@keyframes ld-in { from { opacity: 0; } }
@keyframes ld-tip { from { opacity: 0; transform: translateY(5px); } }
@media (prefers-reduced-motion: no-preference) {
  /* กลีบบานทีละกลีบ แล้วดอกหมุนช้า ๆ · จุดข้อมูลพุ่งออกจากใจกลางระหว่างกลีบ (ระเบิดไอเดีย) */
  .ld-bloom { position: absolute; inset: 0; animation: ld-turn 9s linear infinite; }
  .ld-petal { animation: ld-open .55s cubic-bezier(.2, .9, .3, 1.3) backwards; animation-delay: calc(var(--i) * 70ms); }
  .ld-core { animation: ld-pulse 1.6s ease-in-out infinite; }
  .ld-spark { animation: ld-burst 1.8s ease-out infinite; animation-delay: calc(var(--i) * 150ms); }
}
@keyframes ld-open { from { transform: rotate(var(--r)) scale(0); } }
@keyframes ld-turn { to { transform: rotate(360deg); } }
@keyframes ld-pulse { 50% { transform: scale(1.09); box-shadow: 0 0 0 9px color-mix(in srgb, var(--dc-forest) 12%, transparent); } }
@keyframes ld-burst { 0% { opacity: 0; transform: rotate(var(--a)) translateY(0) scale(.4); } 15% { opacity: 1; } 70% { opacity: .9; } 100% { opacity: 0; transform: rotate(calc(var(--a) + 24deg)) translateY(calc(var(--d) * -1)) scale(1); } }

/* ---------- อัปโหลดไฟล์: วงแหวน % ขั้นตอน ความเร็ว ---------- */
.up-prog { display: grid; grid-template-columns: 128px minmax(0, 1fr); gap: 16px; align-items: center; padding: 14px; border: 1px solid var(--dc-line); border-radius: 14px; background: var(--dc-surface-2); }
.up-prog[hidden] { display: none; }
.up-ring-w { position: relative; width: 128px; height: 128px; }
.up-ring { width: 100%; height: 100%; transform: rotate(-90deg); }
.up-ring-bg { fill: none; stroke: var(--dc-line); stroke-width: 10; }
.up-ring-fg { fill: none; stroke: var(--dc-forest); stroke-width: 10; stroke-linecap: round; transition: stroke-dashoffset .25s ease-out; }
.up-prog.done .up-ring-fg { stroke: var(--dc-lamduan); }
#up-pct { position: absolute; inset: 0; display: grid; place-items: center; font-size: 1.5rem; font-variant-numeric: tabular-nums; }
.up-steps, .proc-steps { list-style: none; margin: 0 0 6px; padding: 0; display: grid; gap: 4px; counter-reset: st; }
.up-steps li, .proc-steps li { position: relative; padding-left: 28px; color: var(--dc-ink-2); font-size: .9rem; counter-increment: st; }
.up-steps li::before, .proc-steps li::before { content: counter(st); position: absolute; left: 0; top: .15em; width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--dc-line); display: grid; place-items: center; font-size: .7rem; line-height: 1; background: var(--dc-surface); }
.up-steps li.on, .proc-steps li.on { color: var(--dc-ink); font-weight: 600; }
.up-steps li.on::before, .proc-steps li.on::before { border-color: var(--dc-forest); color: var(--dc-forest); }
.up-steps li.done, .proc-steps li.done { color: var(--dc-ink); }
.up-steps li.done::before, .proc-steps li.done::before { content: '✓'; border-color: var(--dc-forest); background: var(--dc-forest); color: var(--dc-forest-ink); }
#up-sz { margin: 0; font-variant-numeric: tabular-nums; } #up-msg { margin: 2px 0 8px; }
form.uploading .drop { opacity: .55; pointer-events: none; }
@media (max-width: 520px) { .up-prog { grid-template-columns: minmax(0, 1fr); justify-items: center; } }

/* ---------- กำลังประมวลผลไฟล์: เอกสารถูกสแกน ตัวเลขลอยขึ้น ---------- */
.proc { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 16px; align-items: center; margin: 12px 0; padding: 14px; border: 1px solid var(--dc-line); border-radius: 14px; background: var(--dc-surface-2); }
.proc-anim { position: relative; width: 120px; height: 110px; }
.proc-doc { position: absolute; left: 30px; top: 10px; width: 60px; height: 78px; padding: 14px 9px 0; box-sizing: border-box; overflow: hidden; border: 2px solid var(--dc-forest); border-radius: 6px 16px 6px 6px; background: var(--dc-surface); }
.proc-doc i { display: block; height: 5px; margin-bottom: 7px; border-radius: 3px; background: var(--dc-line); }
.proc-doc i:nth-child(2) { width: 70%; } .proc-doc i:nth-child(4) { width: 55%; }
.proc-scan { position: absolute; left: 0; right: 0; top: 0; height: 14px; background: rgba(242, 207, 107, .55); background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--dc-lamduan) 70%, transparent), transparent); }
.proc-bit { position: absolute; bottom: 6px; color: var(--dc-forest); font: 600 .72rem/1 var(--dc-font); opacity: 0; }
.proc-bit:nth-of-type(1) { left: 14px; } .proc-bit:nth-of-type(2) { left: 30px; } .proc-bit:nth-of-type(3) { left: 52px; } .proc-bit:nth-of-type(4) { left: 84px; } .proc-bit:nth-of-type(5) { left: 100px; }
.proc p { margin: 4px 0 0; }
@media (prefers-reduced-motion: no-preference) {
  .proc-scan { animation: proc-scan 1.6s ease-in-out infinite; }
  .proc-bit { animation: proc-bit 2.4s ease-out infinite; } .proc-bit:nth-of-type(2) { animation-delay: .5s; } .proc-bit:nth-of-type(3) { animation-delay: 1s; } .proc-bit:nth-of-type(4) { animation-delay: 1.4s; } .proc-bit:nth-of-type(5) { animation-delay: 1.9s; }
  .proc-steps li.on::before, .up-steps li.on::before { animation: st-pulse 1.4s ease-in-out infinite; }
}
@keyframes proc-scan { 0% { transform: translateY(-14px); } 100% { transform: translateY(78px); } }
@keyframes proc-bit { 0% { opacity: 0; transform: translateY(0); } 20% { opacity: 1; } 100% { opacity: 0; transform: translateY(-96px); } }
@keyframes st-pulse { 50% { box-shadow: 0 0 0 5px color-mix(in srgb, var(--dc-forest) 20%, transparent); } }
@media (max-width: 520px) { .proc { grid-template-columns: minmax(0, 1fr); justify-items: center; } }

/* ลดการเคลื่อนไหว: ไม่มีการเลื่อน/หมุน แจ้งสถานะยังหายเองด้วยการจางอย่างเดียว */
@media (prefers-reduced-motion: reduce) {
  .toast, .toast.t-bad, .card.shake { animation: none; }
  .toast.t-ok:not(.sticky), .toast.t-info:not(.sticky) { animation: toast-fade .3s linear 7s forwards; }
  .toast.leaving { animation: toast-fade .01s linear forwards !important; }
  .t-ok .t-ic::before { display: none; }
  #dc-progress > i { animation: none; }
  .is-busy::before { animation-duration: 2s; }
  .dc-loader { animation: none; }
}
@keyframes toast-fade { to { opacity: 0; visibility: hidden; } }
@media print { .dc-toasts, #dc-progress, .dc-loader { display: none !important; } }

/* ตัวกรอง/ค้นหาตาราง (filter.js) */
.flt-bar { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px 12px; margin: 8px 0; }
.flt-f { display: grid; gap: 2px; font-size: .85rem; } .flt-f input[type=search] { min-width: 15em; }
.flt-n { font-size: .85rem; color: var(--ink-2, #555); align-self: center; }
.flt-sort { cursor: pointer; user-select: none; } .flt-sort:hover { text-decoration: underline; }
.flt-sort[aria-sort=ascending]::after { content: " ▲"; font-size: .7em; } .flt-sort[aria-sort=descending]::after { content: " ▼"; font-size: .7em; }
tr[hidden] { display: none; }
@media (max-width: 600px) { .flt-f input[type=search] { min-width: 0; width: 100%; } .flt-f { flex: 1 1 100%; } }

/* แถบประกาศ/ปิดปรับปรุง (จัดการระบบ) */
.sys-notice { margin: 0 0 12px; padding: 10px 14px; border-left: 4px solid var(--line, #bbb); border-radius: 0 8px 8px 0; background: var(--surface-2, #f3f3f3); line-height: 1.55; }
.sys-notice.sys-warn { border-left-color: #d9a21b; } .sys-notice.sys-bad { border-left-color: #b3392d; } .sys-notice.sys-info { border-left-color: #2f6f4f; }