/* ===== PLC Nanoi : theme พาสเทล #96DFD8 #85D48E #AEE6CB ===== */
:root { --brand:#26A69A; --brand-d:#1E8A80; --p1:#96DFD8; --p2:#85D48E; --p3:#AEE6CB; }
html, body { font-family: 'Sarabun', sans-serif; }
body { -webkit-tap-highlight-color: transparent; }
::selection { background: #AEE6CB; }

/* ----- Sidebar ----- */
.side-bg { background: linear-gradient(180deg, #F2FBF8 0%, #FFFFFF 45%); }
.nav-link { display:flex; align-items:center; gap:.75rem; padding:.68rem .9rem; border-radius:.9rem; color:#5b6b73; font-weight:500; transition:all .2s; }
.nav-link:hover { background:#EAF8F4; color:#0f3d39; }
.nav-link.active { background:linear-gradient(135deg,#26A69A,#5CC59A); color:#fff; box-shadow:0 8px 20px -8px rgba(38,166,154,.65); }
.nav-link.active .badge { background:#fff; color:#26A69A; }
.nav-ico { width:2rem; height:2rem; border-radius:.65rem; display:grid; place-items:center; background:#EAF8F4; color:#26A69A; font-size:1.05rem; transition:.2s; flex-shrink:0; }
.nav-link.active .nav-ico { background:rgba(255,255,255,.22); color:#fff; }

/* ----- Components ----- */
.card { background:#fff; border:1px solid #e9f2ef; border-radius:1.25rem; box-shadow:0 1px 2px rgba(15,23,42,.03), 0 10px 28px -18px rgba(15,60,55,.18); }
.card-h { display:flex; align-items:center; gap:.6rem; padding:1rem 1.25rem; border-bottom:1px solid #f0f5f3; font-weight:700; color:#1f3b38; }
.card-h .ico { width:2.1rem; height:2.1rem; border-radius:.7rem; display:grid; place-items:center; background:linear-gradient(135deg,#96DFD8,#AEE6CB); color:#16766d; }
.badge { display:inline-flex; align-items:center; gap:.25rem; padding:.2rem .6rem; border-radius:999px; font-size:.75rem; font-weight:600; line-height:1.4; white-space:nowrap; }
.btn { display:inline-flex; align-items:center; justify-content:center; gap:.4rem; padding:.6rem 1.1rem; border-radius:.85rem; font-weight:600; font-size:.92rem; transition:all .18s; cursor:pointer; white-space:nowrap; }
.btn:disabled { opacity:.6; cursor:not-allowed; }
.btn-primary { background:linear-gradient(135deg,#26A69A,#5CC59A); color:#fff; box-shadow:0 8px 18px -8px rgba(38,166,154,.6); }
.btn-primary:hover { filter:brightness(1.05); transform:translateY(-1px); }
.btn-light { background:#f1f5f4; color:#334155; }
.btn-light:hover { background:#e2ebe8; }
.btn-soft { background:#E6F7F3; color:#1E8A80; }
.btn-soft:hover { background:#d3f0e9; }
.btn-danger { background:#EF5350; color:#fff; }
.btn-success { background:#26A69A; color:#fff; }
.icon-btn { width:2.15rem; height:2.15rem; display:inline-grid; place-items:center; border-radius:.7rem; transition:all .15s; font-size:1.05rem; }
.icon-btn:hover { transform:translateY(-1px); filter:brightness(.97); }
.ib-view { background:#E1F5FE; color:#0288D1; } .ib-edit { background:#FFF8E1; color:#F57C00; }
.ib-del { background:#FFEBEE; color:#D32F2F; } .ib-print { background:#EDE7F6; color:#4A2C6D; }
.ib-ok { background:#E0F2F1; color:#26A69A; } .ib-star { background:#FFFDE7; color:#FBC02D; }
.ib-sign { background:#E8F5E9; color:#43A047; }
.ib-pdf { background:#FFEBEE; color:#E53935; }

.label { display:block; font-size:.85rem; font-weight:600; color:#475569; margin-bottom:.35rem; }
.label .req { color:#EF5350; }
.input { padding:.62rem .85rem; border:1.5px solid #e2e8f0; border-radius:.8rem; background:#fff; outline:none; transition:border .15s, box-shadow .15s; font-size:.95rem; }
.input:focus { border-color:#26A69A; box-shadow:0 0 0 4px rgba(150,223,216,.35); }
.input[readonly], .input:disabled { background:#f6faf9; color:#64748b; }
.input.invalid { border-color:#EF5350; box-shadow:0 0 0 4px rgba(239,83,80,.12); }
select.input { appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2394a3b8'%3E%3Cpath d='M12 15l-5-5h10z'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right .6rem center; background-size:1.2rem; padding-right:2.2rem; }
textarea.input { line-height:1.65; }
:where(.input) { width:100%; }

/* ----- Table ----- */
.table-wrap { overflow-x:auto; -webkit-overflow-scrolling:touch; }
.tbl { width:100%; border-collapse:separate; border-spacing:0; font-size:.92rem; }
.tbl thead th { background:#F2FAF8; color:#3d5a56; font-weight:600; padding:.8rem .9rem; text-align:left; border-bottom:1px solid #e6f1ee; white-space:nowrap; }
.tbl thead tr:first-child th:first-child { border-top-left-radius:.9rem; }
.tbl thead tr:first-child th:last-child { border-top-right-radius:.9rem; }
.tbl tbody td { padding:.72rem .9rem; border-bottom:1px solid #f1f5f4; vertical-align:middle; }
.tbl tbody tr:hover td { background:#FAFEFD; }
.tbl.compact tbody td { padding:.5rem .6rem; }

/* ----- Dashboard stat card ----- */
.stat { position:relative; overflow:hidden; border-radius:1rem; padding:.8rem .95rem; color:#fff; min-height:78px; display:flex !important; align-items:center; box-shadow:0 10px 22px -16px rgba(0,0,0,.5); transition:transform .2s; isolation:isolate; }
.stat:hover { transform:translateY(-2px); }
.stat::before { content:''; position:absolute; width:96px; height:96px; border-radius:50%; background:rgba(255,255,255,.16); right:-30px; top:-40px; z-index:-1; }
.stat::after { content:''; position:absolute; width:72px; height:72px; border-radius:50%; border:11px solid rgba(255,255,255,.12); right:26px; bottom:-44px; z-index:-1; }
.stat .dots { position:absolute; left:-6px; bottom:-8px; width:64px; height:40px; background-image:radial-gradient(rgba(255,255,255,.28) 1.3px, transparent 1.4px); background-size:8px 8px; z-index:-1; }
.stat .big-ico { position:absolute; right:10px; bottom:4px; font-size:2.3rem; opacity:.2; z-index:-1; }
.stat .s-ico { width:2.15rem; height:2.15rem; border-radius:.7rem; display:grid; place-items:center; background:rgba(255,255,255,.25); font-size:1.1rem; flex-shrink:0; backdrop-filter:blur(4px); }
.stat .s-num { font-size:1.4rem; font-weight:800; line-height:1.15; letter-spacing:-.01em; }
.stat .s-lbl { font-size:.78rem; opacity:.95; font-weight:500; line-height:1.3; }
.stat .s-sub { position:absolute; top:.45rem; right:.55rem; font-size:10px; font-weight:600; background:rgba(255,255,255,.25); border-radius:999px; padding:.05rem .45rem; }
.g-teal   { background:linear-gradient(135deg,#26A69A 0%,#96DFD8 100%); }
.g-green  { background:linear-gradient(135deg,#43A047 0%,#85D48E 100%); }
.g-lime   { background:linear-gradient(135deg,#7CB342 0%,#AED581 100%); }
.g-sun    { background:linear-gradient(135deg,#F57C00 0%,#FFCA28 100%); }
.g-coral  { background:linear-gradient(135deg,#EF5350 0%,#FF8A65 100%); }
.g-plum   { background:linear-gradient(135deg,#4A2C6D 0%,#8E6BBF 100%); }
.g-blue   { background:linear-gradient(135deg,#0288D1 0%,#4FC3F7 100%); }
.g-red    { background:linear-gradient(135deg,#D32F2F 0%,#EF5350 100%); }
.g-gold   { background:linear-gradient(135deg,#F9A825 0%,#FBC02D 100%); }
.g-mint   { background:linear-gradient(135deg,#1E8A80 0%,#AEE6CB 100%); }

/* ----- Skeleton ----- */
.sk { background:linear-gradient(90deg,#eef4f2 25%,#f8fbfa 50%,#eef4f2 75%); background-size:200% 100%; animation:sk 1.2s infinite; border-radius:.5rem; }
@keyframes sk { 0%{background-position:200% 0} 100%{background-position:-200% 0} }

/* ----- Modal ----- */
.modal { position:fixed; inset:0; z-index:60; display:none; align-items:flex-end; justify-content:center; padding:0; }
.modal.open { display:flex; }
.modal-bg { position:absolute; inset:0; background:rgba(15,23,42,.45); backdrop-filter:blur(3px); animation:fade .2s; }
.modal-box { position:relative; background:#fff; width:100%; max-height:92vh; overflow:auto; border-radius:1.5rem 1.5rem 0 0; animation:up .25s ease-out; }
@media (min-width:640px) { .modal { align-items:center; padding:1rem; } .modal-box { border-radius:1.5rem; } }
.modal-head { position:sticky; top:0; background:#fff; z-index:2; padding:1.1rem 1.4rem; border-bottom:1px solid #f1f5f4; display:flex; align-items:center; gap:.75rem; }
.modal-head .ico { width:2.4rem; height:2.4rem; border-radius:.8rem; display:grid; place-items:center; background:linear-gradient(135deg,#96DFD8,#85D48E); color:#fff; font-size:1.2rem; }
.modal-body { padding:1.4rem; }
.modal-foot { position:sticky; bottom:0; background:#fff; padding:1rem 1.4rem; border-top:1px solid #f1f5f4; display:flex; justify-content:flex-end; gap:.5rem; }
@keyframes up { from{transform:translateY(30px);opacity:0} to{transform:none;opacity:1} }
@keyframes fade { from{opacity:0} to{opacity:1} }
.fade-in { animation:fade .35s; }

/* ----- Loader ----- */
#loader { position:fixed; inset:0; z-index:100; display:none; place-items:center; background:rgba(255,255,255,.55); backdrop-filter:blur(2px); }
#loader.show { display:grid; }
.spinner { width:48px; height:48px; border-radius:50%; border:4px solid #AEE6CB; border-top-color:#26A69A; animation:spin .8s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }

/* ----- Signature ----- */
.sig-wrap { border:2px dashed #b9d9d2; border-radius:1rem; background:repeating-linear-gradient(0deg,#fff,#fff 38px,#f0f7f5 39px); position:relative; }
.sig-wrap canvas { width:100%; height:180px; display:block; touch-action:none; border-radius:1rem; }
.seg { display:inline-flex; background:#f1f5f4; padding:.25rem; border-radius:.9rem; gap:.25rem; }
.seg label { cursor:pointer; }
.seg input { display:none; }
.seg span { display:inline-flex; align-items:center; gap:.35rem; padding:.45rem .9rem; border-radius:.7rem; font-size:.88rem; font-weight:600; color:#64748b; }
.seg input:checked + span { background:#fff; color:#26A69A; box-shadow:0 2px 6px rgba(15,23,42,.08); }

/* ----- Upload ----- */
.drop { border:2px dashed #b9d9d2; border-radius:1rem; padding:1.1rem; display:flex; align-items:center; gap:1rem; cursor:pointer; transition:.15s; background:#FBFEFD; }
.drop:hover, .drop.over { border-color:#26A69A; background:#EFFAF7; }
.thumb { position:relative; border-radius:.9rem; overflow:hidden; aspect-ratio:4/3; background:#f1f5f4; }
.thumb img { width:100%; height:100%; object-fit:cover; }
.thumb .x { position:absolute; top:.35rem; right:.35rem; width:1.8rem; height:1.8rem; border-radius:.6rem; display:grid; place-items:center; background:rgba(239,83,80,.92); color:#fff; }

/* ----- Participant drag ----- */
.drag-handle { cursor:grab; color:#94a3b8; }
.sortable-ghost td { background:#EFFAF7 !important; opacity:.7; }
.sortable-chosen td { background:#F7FDFB; }
.pick-item { display:flex; align-items:center; gap:.7rem; padding:.6rem .75rem; border-radius:.8rem; border:1.5px solid #eef2f1; cursor:pointer; transition:.15s; }
.pick-item:hover { border-color:#96DFD8; }
.pick-item input { width:1.1rem; height:1.1rem; accent-color:#26A69A; }
.pick-item.on { border-color:#26A69A; background:#EFFAF7; }
.pick-item.dis { opacity:.5; cursor:not-allowed; }

/* ----- Lightbox ----- */
#lightbox { position:fixed; inset:0; z-index:90; background:rgba(8,15,20,.92); display:none; align-items:center; justify-content:center; }
#lightbox.open { display:flex; }
#lightbox img { max-width:92vw; max-height:84vh; border-radius:.75rem; box-shadow:0 20px 60px rgba(0,0,0,.5); animation:fade .2s; }
#lightbox button { position:absolute; width:2.8rem; height:2.8rem; border-radius:999px; background:rgba(255,255,255,.12); color:#fff; font-size:1.5rem; display:grid; place-items:center; }
#lightbox button:hover { background:rgba(255,255,255,.25); }
#lightbox .lb-cnt { position:absolute; bottom:1.2rem; left:50%; transform:translateX(-50%); color:#cbd5e1; font-size:.9rem; }
.gal img { cursor:zoom-in; transition:transform .25s; }
.gal a:hover img, .gal div:hover > img { transform:scale(1.04); }

/* ----- Detail ----- */
.kv .k { font-size:.75rem; color:#94a3b8; }
.kv .v { font-weight:600; color:#334155; }
.sec-title { display:flex; align-items:center; gap:.5rem; font-weight:700; color:#1f3b38; margin-bottom:.6rem; }
.sec-title .num { width:1.7rem; height:1.7rem; border-radius:.55rem; display:grid; place-items:center; background:#E6F7F3; color:#1E8A80; font-size:.85rem; }
.prose-box { white-space:pre-line; line-height:1.8; color:#334155; background:#FAFDFC; border:1px solid #edf4f2; border-radius:1rem; padding:.9rem 1.1rem; }
.sig-card { text-align:center; padding:1rem; border-radius:1.1rem; border:1px solid #e9f2ef; background:linear-gradient(180deg,#fff,#F8FCFB); }
.sig-card img { height:64px; margin:0 auto; object-fit:contain; }

.swal2-popup { font-family:'Sarabun',sans-serif !important; border-radius:1.25rem !important; }
.swal2-confirm { background:linear-gradient(135deg,#26A69A,#5CC59A) !important; border-radius:.8rem !important; }
.swal2-cancel { border-radius:.8rem !important; }

/* ให้ .hidden ชนะคลาส component เสมอ */
.hidden:not([class*=":"]) { display:none !important; }

/* ===== การ์ดสถิติบนมือถือ: กะทัดรัด 3 คอลัมน์ ===== */
@media (max-width:639px) {
  .stat-grid { grid-template-columns:repeat(3, minmax(0, 1fr)) !important; gap:.5rem !important; }
  .stat-grid .stat { flex-direction:column; align-items:stretch !important; justify-content:flex-start; min-height:0; padding:.6rem .6rem .55rem; border-radius:.85rem; }
  .stat-grid .stat::before { width:60px; height:60px; right:-22px; top:-26px; }
  .stat-grid .stat::after, .stat-grid .stat .big-ico { display:none; }
  .stat-grid .stat .dots { width:40px; height:26px; }
  .stat-grid .stat > .flex { display:grid !important; grid-template-columns:auto minmax(0, 1fr); align-items:center; gap:.2rem .4rem !important; }
  .stat-grid .stat > .flex > .min-w-0 { display:contents; }
  .stat-grid .stat .s-ico { width:1.55rem; height:1.55rem; border-radius:.5rem; font-size:.85rem; }
  .stat-grid .stat .s-num { font-size:1.12rem; line-height:1.1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .stat-grid .stat .s-lbl { grid-column:1 / -1; font-size:.68rem; line-height:1.3; margin-top:.15rem; }
  .stat-grid .stat .s-sub { position:static; order:2; align-self:flex-start; margin-top:.3rem; font-size:9.5px; padding:0 .4rem; }
}
@media (max-width:359px) { .stat-grid { grid-template-columns:repeat(2, minmax(0, 1fr)) !important; } }

/* ===== กันหน้าจอล้นแนวนอน (มือถือ / แท็บเล็ต) ===== */
.grid > * { min-width:0; }                       /* ลูกของ grid หดได้ ไม่ดันความกว้างเกินจอ */
select.input, input.input, textarea.input { max-width:100%; min-width:0; }
.card, section.card { max-width:100%; }
@supports (overflow:clip) { body { overflow-x:clip; } }  /* กันพลาด: ไม่ให้เลื่อนซ้าย-ขวาทั้งหน้า */

/* ===== การ์ดสถิติบนแท็บเล็ต: 3 คอลัมน์ กะทัดรัด ===== */
@media (min-width:640px) and (max-width:1023px) {
  .stat-grid { grid-template-columns:repeat(3, minmax(0, 1fr)) !important; gap:.6rem !important; }
  .stat-grid .stat { min-height:64px; padding:.6rem .75rem; border-radius:.9rem; }
  .stat-grid .stat .big-ico { font-size:1.8rem; }
  .stat-grid .stat .s-ico { width:1.85rem; height:1.85rem; font-size:.95rem; }
  .stat-grid .stat .s-num { font-size:1.2rem; }
  .stat-grid .stat .s-lbl { font-size:.72rem; }
  .stat-grid .stat > .flex { gap:.55rem !important; }
}