/* Admin kit (admin/kit.js): record form fields and row editors, toasts, the confirm dialog, paged tables,
   sidebar group headings and the "ล่าสุด" list. Storybook skin of theme.css / items.css; works at 390 px. */
.kit-sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.kit-sr-input{position:absolute;top:0;left:0;width:1px;height:1px;margin:0;opacity:0;pointer-events:none}
.admin-page[aria-busy=true]{cursor:progress}

/* ---------- form ---------- */
.kit-form{display:flex;flex-direction:column;gap:12px;min-width:0;color:#5c493d}
.kit-form-fields{display:flex;flex-direction:column;gap:16px;min-width:0}
.kit-form-error{padding:10px 14px;border:1px solid #e3b3a3;border-radius:8px;background:#fdece6;color:#9a3f2b;font-size:13px}
.kit-form-error ul{margin:6px 0 0;padding-left:20px}.kit-form-error:focus{outline:3px solid #ae8c48;outline-offset:2px}
.kit-field{display:flex;flex-direction:column;gap:6px;min-width:0;margin:0;padding:0;border:0}
fieldset.kit-field,fieldset.kit-row{min-inline-size:0}
.kit-field-head{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;min-height:24px}
.kit-form .kit-label,.kit-dialog .kit-label{display:inline;margin:0;font-size:13px;font-weight:700;color:#735738}
.kit-required{margin-left:3px;color:#c3634e}
.kit-limit{margin-left:auto;font-size:11.5px;color:#6b5643;font-variant-numeric:tabular-nums;text-align:right}
.kit-limit:empty{display:none}
.kit-form .kit-sublabel{display:block;flex-basis:100%;margin:0;font-size:12px;font-weight:700;color:#8c6d4f}
.kit-help,.kit-dialog .kit-help{margin:0;font-size:12px;line-height:1.5;color:#6b5643}
.kit-note{margin:0;font-size:12px;color:#44622f}.kit-note:empty{display:none}
.kit-error{margin:0;font-size:12px;font-weight:700;color:#9a3f2b}.kit-error::before{content:'⚠ '}
.kit-disabled-note{margin:0;padding:10px 12px;border:1px dashed #d4bc95;border-radius:8px;background:#f6efe2;color:#6b5643;font-size:12.5px}
.kit-empty{margin:0;padding:10px;border:1px dashed #d4bc95;border-radius:8px;color:#6b5643;font-size:12.5px;text-align:center;list-style:none}
.kit-form input:not([type=checkbox]):not([type=radio]):not([type=color]):not([type=file]),.kit-form select,.kit-form textarea,.kit-dialog input,.kit-dialog textarea{display:block;width:100%;max-width:100%;box-sizing:border-box;min-height:40px;margin:0;padding:8px 10px;border:1px solid #dfcbb4;border-radius:7px;background:#fffdf9;color:#5c493d;font:inherit;font-size:14px;font-weight:400}
.kit-form textarea,.kit-dialog textarea{min-height:84px;line-height:1.5;resize:vertical}
.kit-form select:disabled,.kit-form input:disabled{opacity:.55}
.kit-form [aria-invalid=true],.kit-dialog [aria-invalid=true]{border-color:#c3634e!important;box-shadow:0 0 0 2px #f6d9cf}
.kit-form :is(input,select,textarea):focus-visible,.kit-dialog :is(input,textarea):focus-visible{outline:3px solid #cba06b;outline-offset:1px}
.kit-invalid>.kit-field-head .kit-label{color:#9a3f2b}

/* buttons: every kit button is at least 40 px tall (touch) */
.kit-form button,.kit-table button,.kit-dialog button,.kit-toast button,.kit-page-error button{min-height:40px;padding:6px 14px;border-radius:7px;font-size:13px;cursor:pointer}
.kit-form button.kit-mini{padding:6px 10px;font-size:12.5px}
.kit-form button.kit-remove{border:1px solid #c98a78;background:linear-gradient(#fff4ef,#f6d9cf);color:#9a3f2b;box-shadow:none}
.kit-form button.kit-default{padding:4px 10px;border:1px dashed #cda77e;background:#fffaf1;color:#735738;box-shadow:none;font-size:12px}
.kit-form button.kit-default:hover{background:#ffedc9}
.kit-form button.kit-add{align-self:flex-start}
.kit-form button:disabled{cursor:default;opacity:.45}

/* number: minus / box / plus */
.kit-stepper{display:flex;align-items:center;gap:6px;max-width:340px}
.kit-form .kit-stepper input{flex:1 1 auto;min-width:0;text-align:center;-moz-appearance:textfield;appearance:textfield}
.kit-stepper input::-webkit-outer-spin-button,.kit-stepper input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.kit-form button.kit-step{flex:0 0 44px;width:44px;padding:0;border:1px solid #d4bc95;background:linear-gradient(#fffaf1,#f1e1c4);color:#5a4128;box-shadow:none;font-size:19px;font-weight:700;line-height:1}
.kit-unit{flex:none;font-size:12.5px;color:#6b5643}

/* boolean: a switch drawn on the checkbox itself (64 × 40 touch box) */
.kit-switch-row{display:flex;align-items:center;gap:8px;min-height:40px}
.kit-form input.kit-switch{position:relative;flex:none;width:64px;height:40px;margin:0;padding:0;border:0;background:none;cursor:pointer;-webkit-appearance:none;appearance:none}
.kit-switch::before{content:'';position:absolute;left:4px;right:4px;top:6px;bottom:6px;border:1px solid #cdb08a;border-radius:999px;background:#e7d8c0;transition:background .15s,border-color .15s}
.kit-switch::after{content:'';position:absolute;top:10px;left:9px;width:20px;height:20px;border-radius:50%;background:#fffdf7;box-shadow:0 1px 2px #6b4f3b66;transition:transform .15s}
.kit-switch:checked::before{border-color:#3f7a31;background:linear-gradient(#6aac55,#4f923e)}
.kit-switch:checked::after{transform:translateX(26px)}
.kit-form input.kit-switch:focus-visible{outline:3px solid #ae8c48;outline-offset:0;border-radius:999px}
.kit-switch[aria-invalid=true]::before{border-color:#c3634e}
.kit-switch-state{font-size:13px;font-weight:700;color:#735738;cursor:pointer;user-select:none}

/* enum (≤ 4 options): radio chips */
.kit-chips{display:flex;flex-wrap:wrap;gap:6px}
.kit-form label.kit-chip{position:relative;display:inline-flex;margin:0;font-size:13px;font-weight:400}
.kit-chip>span{display:inline-flex;align-items:center;min-height:40px;padding:6px 14px;border:1px solid #d4bc95;border-radius:999px;background:#fffaf1;color:#735738;font-weight:700;cursor:pointer}
.kit-chip>span:hover{background:#ffedc9}
.kit-chip input:checked+span{border-color:#3f7a31;background:linear-gradient(#6aac55,#4f923e);color:#fffdf2}
.kit-chip input:checked+span::before{content:'✓ '}
.kit-chip input:focus-visible+span,.kit-thumb input:focus-visible+.kit-thumb-box{outline:3px solid #ae8c48;outline-offset:2px}
.kit-chip input[aria-invalid=true]+span{border-color:#c3634e}

/* refs: chosen list + adder */
.kit-chosen{display:flex;flex-direction:column;gap:6px;margin:0;padding:0;list-style:none}
.kit-chosen>li:not(.kit-empty){display:flex;flex-wrap:wrap;align-items:center;gap:6px;padding:6px 8px;border:1px solid #e6d3b6;border-radius:8px;background:#fffcf6}
.kit-chosen-name{flex:1 1 140px;min-width:0;font-size:13px;color:#5a4128;overflow-wrap:anywhere}
.kit-adder{display:flex;flex-wrap:wrap;align-items:flex-end;gap:6px}
.kit-form .kit-adder select,.kit-form .kit-adder input{flex:1 1 200px;width:auto}
.kit-adder button{flex:none}

/* image: preset gallery + upload */
.kit-gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(76px,1fr));gap:6px}
.kit-form label.kit-thumb{position:relative;display:block;margin:0;font-weight:400;cursor:pointer}
.kit-thumb-box{display:flex;flex-direction:column;align-items:center;gap:3px;min-height:76px;padding:5px;border:1px solid #dcc3a2;border-radius:9px;background:#fffaf0}
.kit-thumb-box:hover{background:#fff2d5}
.kit-thumb-box img{width:48px;height:48px;object-fit:contain}
.kit-thumb-none{display:grid;place-items:center;width:48px;height:48px;color:#6b5643;font-size:20px}
.kit-thumb-name{max-width:100%;overflow:hidden;color:#735738;font-size:10.5px;text-overflow:ellipsis;white-space:nowrap}
.kit-thumb input:checked+.kit-thumb-box{border:2px solid #4f923e;background:#eef5e2;box-shadow:0 0 0 2px #cfe3bd}
.kit-upload{display:flex;flex-direction:column;gap:4px}
.kit-form input.kit-file{display:block;width:100%;max-width:100%;min-height:40px;padding:6px 0;border:0;background:none;font:inherit;font-size:12.5px}

/* color + datetime */
.kit-color{display:flex;align-items:center;gap:8px;max-width:280px}
.kit-form input[type=color]{flex:none;width:56px;height:40px;margin:0;padding:2px;border:1px solid #dfcbb4;border-radius:7px;background:#fffdf9;cursor:pointer}
.kit-form input.kit-hex{flex:1 1 auto;font-family:ui-monospace,Consolas,monospace}
.kit-datetime{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.kit-form .kit-datetime input{flex:1 1 220px;width:auto}
.kit-when{flex-basis:100%;font-size:12px;color:#44622f}.kit-when:empty{display:none}

/* rows / conditions / rewards */
.kit-rows{display:flex;flex-direction:column;gap:8px}
.kit-row{margin:0;padding:10px 12px 12px;border:1px solid #e6c9a5;border-radius:9px;background:#fffcf6;box-shadow:inset 0 0 0 2px #ffffff80}
.kit-row.kit-invalid{border-color:#c98a78;background:#fff7f3}
.kit-row-head{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin-bottom:8px}
.kit-row-title{font-size:13px;color:#5a4128}
.kit-row-summary{flex:1 1 120px;min-width:0;color:#44622f;font-size:12px;overflow-wrap:anywhere}
.kit-row-tools{display:flex;flex-wrap:wrap;gap:6px;margin-left:auto}
.kit-row>.kit-error{margin-bottom:8px}
.kit-row-fields{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:10px 12px}
.kit-row-fields:has(>.kit-kind-field){display:flex;flex-direction:column}
.kit-row-kind-fields{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:10px 12px}
.kit-row-kind-fields:empty{display:none}
.kit-kind-field{max-width:420px}

/* ---------- toasts ---------- */
.kit-toasts{position:fixed;z-index:1000;right:16px;bottom:16px;display:flex;flex-direction:column;gap:8px;width:min(380px,calc(100vw - 32px));pointer-events:none}
.kit-toast{display:flex;align-items:flex-start;gap:10px;padding:8px 8px 8px 12px;border:1px solid #d4bc95;border-radius:10px;background:#fffaf0;box-shadow:0 8px 24px #4a32202e;color:#5a4128;font-size:13px;pointer-events:auto}
.kit-toast-good{border-color:#9cc485;background:#f3f8ea}
.kit-toast-bad{border-color:#e3b3a3;background:#fdece6;color:#8a3725}
.kit-toast-info{border-color:#b9d0e3;background:#f1f6fb}
.kit-toast-mark{display:grid;flex:none;place-items:center;width:24px;height:24px;margin-top:8px;border-radius:50%;background:#4f923e;color:#fff;font-size:13px;font-weight:700}
.kit-toast-bad .kit-toast-mark{background:#c3634e}.kit-toast-info .kit-toast-mark{background:#4387bb}
.kit-toast-text{flex:1;min-width:0;margin:10px 0 0;color:inherit;font-size:13px;line-height:1.5;overflow-wrap:anywhere;white-space:pre-line}
.kit-toast button{flex:none}

/* ---------- dialog ---------- */
.kit-dialog-form{display:flex;flex-direction:column;gap:12px;margin:0}
.kit-dialog-title{margin:0;color:#5a4128;font-size:19px;font-weight:700}
.kit-dialog-text{margin:0;color:#735738;font-size:13.5px;line-height:1.6;overflow-wrap:anywhere;white-space:pre-line}
.kit-dialog-body{display:flex;flex-direction:column;gap:6px;max-height:55vh;overflow:auto}
.kit-dialog-actions{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:8px}
.kit-dialog.kit-danger .kit-dialog-title{color:#9a3f2b}
.kit-dialog button.kit-danger-button{border-color:#a94f3c;background:linear-gradient(#e2806b,#c3634e)}

/* ---------- table ---------- */
.kit-table{display:flex;flex-direction:column;gap:8px;min-width:0}
.kit-table table{width:100%;min-width:0}
.kit-table td{overflow-wrap:anywhere}
.kit-table-foot{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.kit-table-info{margin-right:auto;color:#8a7867;font-size:12px}
.kit-table-pager{display:flex;gap:6px}

/* ---------- pages: error card, sidebar groups, "ล่าสุด" ---------- */
.kit-page-error{display:flex;flex-direction:column;align-items:center;gap:8px;padding:40px 16px;text-align:center;color:#8a3725}
.kit-page-error strong{font-size:16px}.kit-page-error p{margin:0;color:#9a3f2b}
.admin-sidebar nav .kit-nav-group{margin:16px 0 2px;padding:0 15px;color:#7a5a3a;font-size:12px;font-weight:700;letter-spacing:.3px;line-height:1.6}
.admin-sidebar nav .kit-nav-group::before{content:'✦ ';color:#c8a47b}
.kit-recent{margin:0 0 10px;padding:8px 6px 6px;border:1px solid #dcc5a9;border-radius:8px;background:#f9ebd2e8}
.kit-recent-title{margin:0 0 2px;padding:0 6px;color:#7a5a3a;font-size:12px;font-weight:700}
.kit-recent ul{display:flex;flex-direction:column;gap:1px;margin:0;padding:0;list-style:none}
.kit-recent li{display:flex;align-items:center;gap:2px}
.kit-recent a{display:flex;flex:1;align-items:center;gap:8px;min-width:0;min-height:40px;padding:4px 8px;border-radius:6px;color:#6f503b;font-size:13.5px}
.kit-recent a span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.kit-recent a .icon{width:18px;height:18px;color:#86664e}
.kit-recent a:hover,.kit-recent a[aria-current=page]{background:#fff2d5}
.kit-recent button.kit-pin{flex:none;min-width:40px;min-height:40px;padding:0;border:0;border-radius:6px;background:transparent;box-shadow:none;color:#b08d5c;font-size:17px;line-height:1;cursor:pointer}
.kit-recent button.kit-pin:hover{background:#fff2d5}
.kit-recent button.kit-pin[aria-pressed=true]{color:#d39a2a}

@media(max-width:1390px){.kit-recent a{font-size:13px}}
@media(max-width:760px){
  .kit-form input:not([type=checkbox]):not([type=radio]):not([type=color]):not([type=file]),.kit-form select,.kit-form textarea,.kit-dialog input,.kit-dialog textarea{font-size:16px}
  .kit-limit{order:3;margin-left:0;flex-basis:100%;text-align:left}
  .kit-field-head .kit-default{margin-left:auto}
  .kit-stepper{max-width:none}
  .kit-row{padding:10px}
  .kit-row-fields,.kit-row-kind-fields{grid-template-columns:minmax(0,1fr)}
  .kit-row-tools{width:100%;margin-left:0}.kit-row-tools button{flex:1 1 0}
  .kit-chosen .kit-row-tools{width:auto}
  .kit-dialog-actions button{flex:1 1 0}
  .kit-toasts{right:12px;bottom:12px;left:12px;width:auto}
  .kit-table-foot>*{flex:1 1 auto}.kit-table-info{flex-basis:100%}
  /* Tables become label/value cards so nothing scrolls sideways. */
  .kit-table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%)}
  .kit-table .table-wrap{border:0}
  .kit-table table,.kit-table tbody,.kit-table tr{display:block;width:100%}
  .kit-table tr{margin-bottom:8px;border:1px solid #ecddc8;border-radius:8px;background:#fffdf7;overflow:hidden}
  .kit-table td{display:grid;grid-template-columns:minmax(84px,34%) minmax(0,1fr);gap:8px;padding:8px 10px;border-right:0}
  .kit-table td::before{content:attr(data-label);color:#6b5643;font-weight:700}
  .kit-table td.kit-table-empty{display:block;padding:30px 12px}.kit-table td.kit-table-empty::before{content:none}
  .admin-sidebar nav .kit-nav-group{flex-shrink:0;align-self:center;margin:0 2px 0 8px;padding:4px 8px;border-left:2px solid #d5b78c;font-size:10.5px;white-space:nowrap}
  .admin-sidebar nav .kit-nav-group::before{content:none}
  .kit-recent{display:flex;align-items:center;gap:6px;max-width:100%;margin:0 0 6px;padding:4px 6px;overflow-x:auto}
  .kit-recent[hidden]{display:none}
  .kit-recent-title{flex:none;margin:0;padding:0 4px;font-size:11px}
  .kit-recent ul{flex-direction:row;gap:4px}
  .kit-recent li{flex:none}
  .kit-recent a{font-size:12px;white-space:nowrap}
}
@media(prefers-reduced-motion:reduce){.kit-switch::before,.kit-switch::after{transition:none}}