:root { --brand:#0C7C82; --brand2:#35B4B0; --brand-50:#E6F4F4; }
html, body { font-family: 'Sarabun', sans-serif; }
body { -webkit-tap-highlight-color: transparent; }
::selection { background: #CDE9EA; }

/* ----- Sidebar ----- */
.nav-link { display:flex; align-items:center; gap:.75rem; padding:.7rem .9rem; border-radius:.9rem; color:#64748b; font-weight:500; transition:all .2s; }
.nav-link:hover { background:#f1f5f9; color:#0f172a; }
.nav-link.active { background:linear-gradient(135deg,#0C7C82,#35B4B0); color:#fff; box-shadow:0 8px 20px -8px rgba(12,124,130,.6); }
.nav-link.active .badge { background:#fff; color:#0C7C82; }

/* ----- Components ----- */
.card { background:#fff; border:1px solid #eef2f5; border-radius:1.25rem; box-shadow:0 1px 2px rgba(15,23,42,.03), 0 8px 24px -16px rgba(15,23,42,.12); }
.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,#0C7C82,#35B4B0); color:#fff; box-shadow:0 8px 18px -8px rgba(12,124,130,.55); }
.btn-primary:hover { filter:brightness(1.05); transform:translateY(-1px); }
.btn-light { background:#f1f5f9; color:#334155; }
.btn-light:hover { background:#e2e8f0; }
.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); }
.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:#0C7C82; } .ib-star { background:#FFFDE7; color:#FBC02D; }

.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:#35B4B0; box-shadow:0 0 0 4px rgba(53,180,176,.15); }
.input[readonly], .input:disabled { background:#f8fafc; 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; }

: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:#f8fafc; color:#475569; font-weight:600; padding:.8rem .9rem; text-align:left; border-bottom:1px solid #eef2f5; 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:.75rem .9rem; border-bottom:1px solid #f1f5f9; vertical-align:middle; }
.tbl tbody tr:hover td { background:#fafdfd; }
.tbl tfoot td { padding:.75rem .9rem; }
.tbl.bordered th, .tbl.bordered td { border:1px solid #e9eef2; text-align:center; }

/* ----- Skeleton ----- */
.sk { background:linear-gradient(90deg,#eef2f5 25%,#f8fafc 50%,#eef2f5 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 #f1f5f9; display:flex; align-items:center; gap:.75rem; }
.modal-body { padding:1.4rem; }
.modal-foot { position:sticky; bottom:0; background:#fff; padding:1rem 1.4rem; border-top:1px solid #f1f5f9; 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:46px; height:46px; border-radius:50%; border:4px solid #CDE9EA; border-top-color:#0C7C82; animation:spin .8s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }

/* ----- Signature ----- */
.sig-wrap { border:2px dashed #cbd5e1; border-radius:1rem; background:repeating-linear-gradient(0deg,#fff,#fff 38px,#f1f5f9 39px); position:relative; }
.sig-wrap canvas { width:100%; height:180px; display:block; touch-action:none; border-radius:1rem; }
.seg { display:inline-flex; background:#f1f5f9; 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:#0C7C82; box-shadow:0 2px 6px rgba(15,23,42,.08); }

/* radio card */
.rcard { cursor:pointer; }
.rcard input { display:none; }
.rcard > div { border:1.5px solid #e2e8f0; border-radius:.9rem; padding:.7rem .9rem; display:flex; align-items:center; gap:.6rem; transition:all .15s; }
.rcard input:checked + div { border-color:#0C7C82; background:#E6F4F4; color:#0C7C82; box-shadow:0 0 0 3px rgba(12,124,130,.12); }

/* Upload preview */
.drop { border:2px dashed #cbd5e1; border-radius:1rem; padding:1rem; display:flex; align-items:center; gap:1rem; cursor:pointer; transition:.15s; }
.drop:hover { border-color:#35B4B0; background:#f8fdfd; }

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

.stat-mini th, .stat-mini td { padding:.45rem .5rem !important; }

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