/* style.css — คอมโพเนนต์ร่วมของ nui-oh
   ★ โทน/สี/ฟอนต์/ระยะ ทั้งหมดมาจาก theme.css (โหลดก่อนไฟล์นี้เสมอ) — ที่นี่ไม่มี :root
   ★ ชื่อ class เดิมครบทุกตัว (JS เกาะอยู่) — เพิ่มของใหม่ได้ ห้ามเปลี่ยนชื่อของเก่า */

.muted{color:var(--muted)}
.hidden{display:none !important}

/* ---------- brand ---------- */
.brand-mark{
  width:44px;height:44px;border-radius:var(--radius);flex:0 0 auto;
  display:grid;place-items:center;
  background:var(--green-900);color:var(--bg);
  font-family:var(--font-serif);font-weight:600;letter-spacing:.5px;font-size:1rem;
}
.brand-mark.sm{width:32px;height:32px;border-radius:var(--radius-sm);font-size:.8rem}
.brand-logo{
  width:56px;height:56px;border-radius:var(--radius);object-fit:cover;flex:0 0 auto;
  background:var(--surface-2);
}
.brand-logo.sm{width:30px;height:30px;border-radius:7px}

/* ---------- buttons ---------- */
.btn{
  appearance:none;border:1px solid var(--line);background:var(--surface);color:var(--ink);
  font-family:inherit;font-size:.92rem;font-weight:500;
  padding:.58rem .95rem;border-radius:var(--radius-sm);cursor:pointer;
  transition:background .15s,border-color .15s,color .15s;
  white-space:nowrap;line-height:1.4;
}
.btn:hover{border-color:var(--brass);background:var(--surface)}
.btn:disabled{opacity:.45;cursor:not-allowed}
.btn-primary{background:var(--green-700);border-color:var(--green-700);color:#FBF9F4;font-weight:600}
.btn-primary:hover{background:var(--green-600);border-color:var(--green-600)}
.btn-ghost{background:transparent;border-color:transparent;color:var(--muted)}
.btn-ghost:hover{background:var(--green-100);border-color:transparent;color:var(--ink)}
.btn-danger{background:var(--danger);border-color:var(--danger);color:#FBF9F4}
.btn-danger:hover{background:#9C3729;border-color:#9C3729}
.btn-sm{padding:.36rem .68rem;font-size:.82rem;border-radius:7px}
.btn-block{width:100%;padding:.78rem;font-size:1rem}

/* ---------- fields ---------- */
.field,.form label{
  display:flex;flex-direction:column;gap:.35rem;
  font-size:.8rem;font-weight:500;color:var(--muted);letter-spacing:.02em;
}
input,select,textarea{
  font-family:inherit;font-size:.95rem;color:var(--ink);
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-sm);
  padding:.62rem .75rem;width:100%;line-height:1.5;
  transition:border-color .15s,box-shadow .15s;
}
input[type=number]{font-family:var(--font-mono)}
input:focus,select:focus,textarea:focus{
  outline:none;border-color:var(--brass);box-shadow:0 0 0 3px var(--brass-soft);
}
.form-err{
  background:var(--danger-soft);color:var(--danger);border:1px solid #EBCFC8;
  padding:.6rem .8rem;border-radius:var(--radius-sm);font-size:.85rem;font-weight:500;
}

/* ---------- app shell: แถบบนเขียวเข้ม ---------- */
.topbar{
  position:sticky;top:0;z-index:5;
  display:flex;align-items:center;justify-content:space-between;gap:var(--s2);
  background:var(--green-900);color:#F1EDE4;
  border-bottom:1px solid var(--green-800);
  padding:.7rem 1.25rem;
}
.topbar-left{display:flex;align-items:center;gap:.7rem;min-width:0}
/* ชื่อหน้าปัจจุบัน = wordmark serif + ขีดทองเหลืองนำหน้า (แทน "แถบ active" — หน้าพวกนี้ไม่มีลิงก์หาตัวเอง) */
.topbar-title{
  font-family:var(--font-serif);font-weight:500;font-size:1.06rem;color:#FCFAF5;
  padding-left:.7rem;border-left:2px solid var(--brass);line-height:1.3;
}
.topbar-right{display:flex;align-items:center;gap:.35rem;flex-wrap:wrap;justify-content:flex-end}
.nav-link{
  font-size:.855rem;font-weight:400;color:#B9C4BC;text-decoration:none;
  padding:.4rem .6rem;border-radius:6px;
  border-bottom:2px solid transparent;
  transition:color .14s,background .14s,border-color .14s;
}
.nav-link:hover{color:#FCFAF5;background:rgba(255,255,255,.06)}
.nav-link.on{color:#FCFAF5;border-bottom-color:var(--brass)}   /* แถบ active ทองเหลือง */
.userbox{display:flex;align-items:center;gap:.45rem;font-size:.86rem;color:#E3DDD1;margin-left:.4rem}
.user-name{font-weight:500}
.role-badge{
  font-size:.68rem;font-weight:600;text-transform:uppercase;letter-spacing:.08em;
  padding:.16rem .55rem;border-radius:999px;
  background:rgba(169,140,91,.22);color:#DCC79C;
}
.role-badge.is-admin{background:rgba(169,140,91,.3);color:#E8D6B2}
.topbar .btn-ghost{color:#A9B4AC}
.topbar .btn-ghost:hover{background:rgba(255,255,255,.08);color:#FCFAF5}

/* ---------- layout ---------- */
.container{max-width:1120px;margin:0 auto;padding:var(--s3) var(--s2) var(--s6)}
.toolbar{display:flex;gap:.8rem;align-items:center;margin-bottom:var(--s2);flex-wrap:wrap}
.search-form{flex:1 1 260px;min-width:200px}
.search-form input{width:100%}

/* ---------- card ---------- */
.card{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
}
.table-card{overflow-x:auto}

/* ---------- table: แถวโปร่ง · hairline · หัวตาราง sticky · เลขชิดขวา tnum ---------- */
.table{width:100%;border-collapse:collapse;font-size:.92rem;min-width:760px}
.table thead th{
  text-align:left;font-size:.7rem;font-weight:600;
  text-transform:uppercase;letter-spacing:.09em;   /* label ตัวเล็ก letter-spacing กว้าง */
  color:var(--muted);background:var(--surface-2);
  padding:.85rem .95rem;border-bottom:1px solid var(--line);
  position:sticky;top:0;z-index:1;
}
.table th.num-col,.table td.num{text-align:right}
.table th.act-col,.table td.actions{text-align:right;white-space:nowrap}
.table tbody td{
  padding:.85rem .95rem;border-bottom:1px solid var(--line-soft);vertical-align:middle;
}
.table tbody tr:last-child td{border-bottom:none}
.table tbody tr:hover{background:var(--green-100)}   /* hover tint */
td.num{font-weight:500}
td.num.neg{color:var(--danger);font-weight:600}
.barcode-cell{font-size:.85rem;color:var(--ink-muted)}
.actions .btn{margin-left:.3rem}
.empty{text-align:center;color:var(--ink-faint);padding:var(--s5) var(--s2) !important;font-size:.9rem}
.readonly .actions{color:var(--ink-faint)}

/* ---------- modal ---------- */
.modal{
  position:fixed;inset:0;z-index:30;display:grid;place-items:center;padding:1.2rem;
  background:rgba(20,26,22,.42);backdrop-filter:blur(2px);
}
.modal-card{
  position:relative;width:100%;max-width:440px;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow);padding:var(--s3);
  max-height:90dvh;overflow:auto;
}
.modal-close{
  position:absolute;top:.6rem;right:.7rem;border:none;background:transparent;
  font-size:1.4rem;line-height:1;color:var(--ink-faint);cursor:pointer;
  width:2rem;height:2rem;border-radius:var(--radius-sm);
}
.modal-close:hover{background:var(--surface-2);color:var(--ink)}
.form{display:flex;flex-direction:column;gap:.95rem;margin-top:.4rem}
.form-actions{display:flex;justify-content:flex-end;gap:.6rem;margin-top:.4rem}

/* ---------- toast ---------- */
.toast{
  position:fixed;left:50%;bottom:1.6rem;transform:translate(-50%,1.5rem);
  background:var(--green-900);color:#F7F4EC;padding:.75rem 1.2rem;border-radius:var(--radius-sm);
  font-size:.9rem;font-weight:500;box-shadow:var(--shadow);
  opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;max-width:90vw;z-index:60;
}
.toast.show{opacity:1;transform:translate(-50%,0)}
.toast.toast-err{background:var(--danger)}

/* ---------- auth: การ์ดกลางจอบนพื้นงาช้าง ---------- */
.auth-split{display:grid;place-items:center;min-height:100dvh;padding:var(--s3) var(--s2)}
.auth-art{display:none}                       /* โครง HTML คงเดิม — ซ่อนแผงภาพด้วย CSS ล้วน */
.auth-panel{display:grid;place-items:center;width:100%;background:transparent;padding:0}
.auth-card,.login-card{
  width:100%;max-width:400px;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:var(--s5) var(--s4);
  display:flex;flex-direction:column;gap:var(--s2);
}
.auth-card form{display:flex;flex-direction:column;gap:var(--s2)}
.brand{
  display:flex;flex-direction:column;align-items:center;gap:.55rem;
  padding-bottom:var(--s2);margin-bottom:.2rem;
  border-bottom:1px solid var(--line);
}
.brand .brand-logo{width:52px;height:52px;border-radius:var(--radius)}
.brand-text{text-align:center}
/* wordmark: SHELDON · NUI-OH */
.brand-title{
  font-size:.9rem;font-weight:600;color:var(--ink);
  text-transform:uppercase;letter-spacing:.2em;line-height:1.5;
}
.brand-sub{font-family:var(--font-serif);font-size:1.15rem;color:var(--ink-muted);font-weight:500;letter-spacing:.01em}
.auth-links{display:flex;justify-content:center;gap:.4rem;font-size:.85rem;flex-wrap:wrap;color:var(--muted)}
.auth-links a{color:var(--green-700);font-weight:500;text-decoration:none;border-bottom:1px solid var(--brass-soft)}
.auth-links a:hover{border-bottom-color:var(--brass)}
.auth-foot,.login-foot{text-align:center;color:var(--ink-faint);font-size:.75rem;margin:var(--s3) 0 0;letter-spacing:.05em}
.login-wrap{min-height:100dvh;display:grid;place-items:center;padding:var(--s3)}
.ok-box{
  background:var(--ok-soft);color:var(--ok);border:1px solid #CDDFD4;
  padding:1rem;border-radius:var(--radius-sm);font-weight:500;text-align:center;
}

/* ---------- toggle switch ---------- */
.switch-row{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:var(--s2) var(--s3);margin-bottom:var(--s2);
}
.switch-label{font-weight:500}
.switch-sub{font-size:.82rem;color:var(--muted);margin-top:.1rem}
.switch{position:relative;display:inline-block;width:46px;height:26px;flex:0 0 auto}
.switch input{opacity:0;width:0;height:0}
.switch .slider{position:absolute;inset:0;background:#CFCABE;border-radius:999px;cursor:pointer;transition:background .2s}
.switch .slider::before{
  content:"";position:absolute;height:20px;width:20px;left:3px;top:3px;
  background:var(--surface);border-radius:50%;transition:transform .2s;
}
.switch input:checked + .slider{background:var(--green-700)}
.switch input:checked + .slider::before{transform:translateX(20px)}
.switch input:disabled + .slider{opacity:.5;cursor:not-allowed}

/* ---------- users page ---------- */
.status-badge{font-size:.72rem;font-weight:600;padding:.2rem .6rem;border-radius:999px;letter-spacing:.03em}
.status-badge.active{background:var(--ok-soft);color:var(--ok)}
.status-badge.pending{background:var(--warn-soft);color:var(--warn)}
.row-role{padding:.35rem .45rem;font-size:.85rem;min-width:108px}
.cell-actions{display:flex;gap:.35rem;justify-content:flex-end;flex-wrap:wrap}
.form label.check-row{flex-direction:row;align-items:center;gap:.5rem}
.form label.check-row input{width:auto}