/* ---- auto settings v2 (2026-10-18, the user: "เพิ่มตั้งค่าออโต้ ให้มีไม่ต้องแดชหลบมอนด้วย และปรับ ui ให้ดูง่าย สะอาด"):
   the monsters, their order and their levels on the left page; three tabs on the right (สกิล / การต่อสู้ / ทั่วไป), a few
   short switches in boxes of their own in each (js/ui.js UI.showAutoCfg) ---- */
.ac-right { display: flex; flex-direction: column; gap: 10px; }
.ac-tabs { display: flex; gap: 6px; flex-wrap: nowrap; }
.ac-tabs .ac-tab { flex: 1; min-height: 40px; justify-content: center; font-size: 1rem; font-weight: 700; }
.ac-pane { display: flex; flex-direction: column; gap: 10px; }
.ac-group { display: flex; flex-direction: column; gap: 10px; padding: 10px 12px 12px; border-radius: 12px; background: rgba(0, 0, 0, 0.2); border: 1px solid rgba(217, 164, 67, 0.38); }
.ac-gh { margin: 0; font: 700 1rem/1.25 var(--thai); color: #f6dc98; }
.ac-gh small { margin-left: 8px; font-weight: 500; font-size: 0.8em; color: var(--cream-2); }
.ac-group .ac-toggle { padding: 2px 0; }
.ac-group .ac-skill-list, .ac-group .ac-skill { gap: 10px; }
.ac-skill.held .ac-tlabel small { color: #f0b860; }
.ac-skill.held canvas { opacity: 0.55; }
.ac-lv { padding: 10px 12px 12px; border-radius: 12px; background: rgba(12, 16, 34, 0.35); border: 1px solid rgba(255, 214, 120, 0.25); }
.ac-lv:empty { display: none; }
.ac-lv .ac-slabel b { font-size: 0.95em; }

/* in the book: the right page holds the tabs and their box (the footer's two buttons stay under it) */
#ui .bw-autocfg .ac-right { left: 812px; top: 196px; width: 492px; height: 596px; }
#ui .bw-autocfg .ac-mobs { gap: 12px; }

/* the bright book skins: dark ink */
:root[data-booklight] #ui .bw-autocfg .ac-gh { color: var(--bk-acc); }
:root[data-booklight] #ui .bw-autocfg .ac-gh small { color: var(--bk-ink); opacity: 0.8; }
:root[data-booklight] #ui .bw-autocfg .ac-group { background: rgba(255, 255, 255, 0.28); border-color: color-mix(in srgb, var(--bk-acc) 40%, transparent); }
:root[data-booklight] #ui .bw-autocfg .ac-lv { background: rgba(255, 255, 255, 0.28); border-color: color-mix(in srgb, var(--bk-acc) 40%, transparent); }

/* the tabs: dark glass with gold edges, the open one gold (every book skin; the bright ones in their ink) */
#ui #autocfg .ac-tabs .ac-tab { background: rgba(0, 0, 0, 0.28); border: 1px solid rgba(217, 164, 67, 0.5); color: #f2ead6; -webkit-text-fill-color: #f2ead6; text-shadow: none; }
#ui #autocfg .ac-tabs .ac-tab:hover:not(.on) { background: rgba(217, 164, 67, 0.18); }
#ui #autocfg .ac-tabs .ac-tab.on { background: var(--gold); border-color: var(--gold); color: #24170a; -webkit-text-fill-color: #24170a; }
:root[data-booklight] #ui #autocfg .ac-tabs .ac-tab:not(.on) { background: rgba(255, 255, 255, 0.5); border-color: color-mix(in srgb, var(--bk-acc) 45%, transparent); color: var(--bk-acc); -webkit-text-fill-color: var(--bk-acc); }
/* a map with no monsters: its note across the whole grid */
.ac-mob-grid .ac-empty { grid-column: 1 / -1; }
/* the bright skins: the page's other chips in their ink too (they were grey on pink) */
:root[data-booklight] #ui #autocfg .ac-chips .chip:not(.on), :root[data-booklight] #ui #autocfg .ac-mob-tools .chip { background: rgba(255, 255, 255, 0.5); border-color: color-mix(in srgb, var(--bk-acc) 45%, transparent); color: var(--bk-acc); -webkit-text-fill-color: var(--bk-acc); }