/* ============================================================================
 * KanomJeen · Unturned Dashboard — Drop-in Theme
 * v2.0 "navy game-admin" (2026-09-16) — ตาม KanomJeen-UIUX-Asset-Pack
 *
 * โหลดก่อน <style> ในหน้า (ดู public/index.html) จึงทำหน้าที่เป็น "ชั้นเสริม":
 *   - ผูกฟอนต์/โทเคนเข้ากับตัวแดชบอร์ด
 *   - เพิ่มสถานะ hover/focus/disabled, scrollbar, ตาราง, toast, แท็บ
 *   - คลาสใหม่ของสเปก v2: .k-meter, .k-stat, .k-pill, .k-mascot, .k-subtabs
 * ของเดิม (ธีมเขียว v1) เก็บไว้ที่ dashboard-theme.v1-green.css.bak
 *
 * ถ้าถอด <link> นี้ออก แดชบอร์ดยังใช้ได้ (แค่ขาดสถานะ hover/scrollbar/คลาสเสริม)
 * ========================================================================= */

@import url('tokens/design-tokens.css?v=2.1');   /* ?v= = กันเบราว์เซอร์เสิร์ฟไฟล์เก่าจากแคช */
@import url('icons/icons.css?v=2.2');    /* แก้ไฟล์นี้แล้วขยับเลข ?v= ด้วย (ไอคอน power เพิ่ม 17 ก.ย. 2026) */
@import url('icons-png/pack-icons.css');  /* ไอคอน raster จากชีตแพ็ก (ตัดกริด/ถอดพื้นแล้ว) */

:root {
  /* ---------- ปรับขนาดตัวอักษรทั้งแดชบอร์ดที่จุดเดียว ----------
     แก้ --kj-type-scale อย่างเดียว (1 = ตามดีไซน์เดิม, ตอนนี้ 1.15 = ใหญ่ขึ้น ~15%)
     ค่าทุกตัวอ้างจากตัวเลขดีไซน์เดิมใน tokens/design-tokens.css                               */
  --kj-type-scale: 1.15;
  --kj-text-2xs: calc(12px * var(--kj-type-scale));
  --kj-text-xs:  calc(13px * var(--kj-type-scale));
  --kj-text-sm:  calc(14px * var(--kj-type-scale));
  --kj-text-md:  calc(15px * var(--kj-type-scale));
  --kj-text-lg:  calc(17px * var(--kj-type-scale));
  --kj-text-xl:  calc(21px * var(--kj-type-scale));
  --kj-text-2xl: calc(25px * var(--kj-type-scale));
  --kj-text-3xl: calc(32px * var(--kj-type-scale));

  /* ---------- ผูกตัวแปรเดิมของแดชบอร์ด → โทเคน v2 ---------- */
  --bg: var(--kj-bg);
  --panel: var(--kj-surface);
  --panel2: var(--kj-surface-2);
  --line: var(--kj-border);
  --txt: var(--kj-text);
  --dim: var(--kj-text-dim);
  --green: var(--kj-btn-start);
  --green2: var(--kj-success);
  --red: var(--kj-danger);
  --amber: var(--kj-warning);
  --blue: var(--kj-accent);
  --mono: var(--kj-font-mono);
  /* ปุ่มตามสเปก v2 */
  --kj-btn-primary-bg: var(--kj-btn-start);
  --kj-btn-danger-bg: var(--kj-btn-stop);
}

/* [hidden] ต้องชนะคลาสที่ตั้ง display ไว้ (เช่น .k-mascot{display:block}, .k-badge{display:inline-flex})
   ไม่งั้นปุ่ม/ป้ายที่ตั้ง hidden="" จาก JS จะโชว์ค้าง */
[hidden] { display: none !important; }

body {
  font-family: var(--kj-font-sans);
  line-height: var(--kj-leading-base);
  -webkit-font-smoothing: antialiased;
}
a { text-underline-offset: 2px; text-decoration-color: var(--kj-accent-line); }

/* ---------- โครงหน้า ---------- */
header { box-shadow: var(--kj-shadow-1); }
.k-brand img { display: block; flex: none; }

/* ---------- โฟกัส/คีย์บอร์ด ---------- */
:where(button, a, input, textarea, select, [tabindex]):focus-visible {
  outline: none;
  box-shadow: var(--kj-focus-ring);
  border-radius: var(--kj-radius-sm);
}

/* ---------- ปุ่ม ---------- */
.k-btn, .k-iconbtn, .k-chip, .k-tabs button {
  transition: background var(--kj-dur-fast) var(--kj-ease-out),
              border-color var(--kj-dur-fast) var(--kj-ease-out),
              color var(--kj-dur-fast) var(--kj-ease-out),
              transform var(--kj-dur-instant) var(--kj-ease-out);
}
.k-btn:active:not(:disabled) { transform: translateY(1px); }
.k-btn:disabled { opacity: .45; cursor: not-allowed; box-shadow: none; }
/* Start = เขียว, Stop = แดง, Restart = น้ำเงินเข้ม (สเปก 01 Overview) */
.k-btn--start   { background: var(--kj-btn-start); color: var(--kj-text-on-accent); }
.k-btn--start:hover:not(:disabled)   { background: var(--kj-btn-start-hover); }
.k-btn--stop    { background: var(--kj-btn-stop); color: var(--kj-text-on-accent); }
.k-btn--stop:hover:not(:disabled)    { background: var(--kj-btn-stop-hover); }
.k-btn--restart { background: var(--kj-btn-restart); color: var(--kj-text-on-accent); }
.k-btn--restart:hover:not(:disabled) { background: var(--kj-accent); }

/* ---------- การ์ด (gradient navy ตามภาพบรีฟ) ---------- */
.k-card {
  background: var(--kj-grad-card);
  transition: border-color var(--kj-dur-fast) var(--kj-ease-out), box-shadow var(--kj-dur-fast) var(--kj-ease-out);
}
.k-card:hover { border-color: var(--kj-border-strong); }
.k-card .k-lab { letter-spacing: var(--kj-tracking-caps); }
.k-card .k-val { font-variant-numeric: tabular-nums; }

/* ---------- ตัวเลข/มิเตอร์ (สเปก: Stat cards CPU/RAM/TPS/Disk) ---------- */
.k-stat { display: flex; flex-direction: column; gap: var(--kj-space-2); }
.k-stat strong { font-size: var(--kj-text-2xl); font-weight: var(--kj-weight-bold); font-variant-numeric: tabular-nums; }
.k-meter { height: 6px; border-radius: var(--kj-radius-pill); background: #123b5b; overflow: hidden; }
.k-meter i {
  display: block; height: 100%; width: 0; border-radius: inherit;
  background: var(--kj-teal-400);
  transition: width var(--kj-dur-slow) var(--kj-ease-out), background var(--kj-dur-base);
}
.k-meter.warn i { background: var(--kj-warning); }
.k-meter.danger i { background: var(--kj-danger); }

/* ---------- ป้ายกลม (Online pill) ---------- */
.k-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px; border-radius: var(--kj-radius-pill);
  background: rgba(0, 200, 107, .14); color: var(--kj-success);
  font-size: var(--kj-text-xs); font-weight: var(--kj-weight-medium); white-space: nowrap;
}
.k-pill.off { background: rgba(126, 143, 163, .16); color: var(--kj-text-dim); }
.k-pill.warn { background: var(--kj-secondary-soft); color: var(--kj-warning); }

/* ---------- มาสคอตขนมจีน ---------- */
.k-mascot { display: block; object-fit: contain; user-select: none; }
.k-mascot--sm { width: 48px; height: 48px; }
.k-mascot--md { width: 72px; height: 72px; }
.k-mascot--lg { width: 132px; height: 132px; }
/* ห้ามวางมาสคอตทับข้อมูล — ใช้เป็นอาร์ตใน Hero/empty state เท่านั้น */
.k-empty .k-mascot { opacity: .9; }
.k-heroart {
  position: relative; display: flex; align-items: center; justify-content: center;
  min-height: 180px; border-radius: var(--kj-radius-md);
  background: radial-gradient(120% 120% at 30% 20%, #10314f 0%, #07203a 55%, #061c33 100%);
  border: 1px solid var(--kj-border); overflow: hidden;
}
.k-heroart .k-mascot { position: relative; z-index: 1; max-height: 168px; width: auto; }   /* เผื่อใช้ใน empty state อื่น ไม่ได้ใช้ใน Hero แล้ว */
.k-heroart::after {
  content: ""; position: absolute; inset: auto -20% -55% -20%; height: 70%;
  background: radial-gradient(60% 100% at 50% 0%, rgba(19, 199, 188, .22), transparent 70%);
}

/* Hero ที่ใช้ “แบนเนอร์แมป” (16:9 จาก Steam Workshop) — วางเต็มกรอบ + ไล่เงาให้อ่านชื่อแมปได้ */
.k-heroart.has-banner { min-height: 220px; }
.k-heroart .k-heroimg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.k-heroart.has-banner::after {
  inset: 0; height: auto; z-index: 1;
  background: linear-gradient(180deg, rgba(4, 19, 38, .12) 0%, rgba(4, 19, 38, .5) 58%, rgba(4, 19, 38, .88) 100%);
}
.k-heroart-tag {
  position: absolute; left: var(--kj-space-3); bottom: var(--kj-space-3); z-index: 2;
  display: inline-flex; align-items: center; padding: 5px 12px;
  border-radius: var(--kj-radius-pill); background: rgba(4, 19, 38, .72);
  border: 1px solid var(--kj-border); color: var(--kj-text);
  font-size: var(--kj-text-xs); font-weight: var(--kj-weight-medium);
  backdrop-filter: blur(3px);
}
.k-heroart-tag[hidden] { display: none; }

/* ---------- แท็บ (สำรอง/ย่อยของหน้า) ---------- */
.k-subtabs { display: flex; gap: var(--kj-space-2); flex-wrap: wrap; margin-bottom: var(--kj-space-4); }
.k-panel[hidden] { display: none; }

/* ---------- กล่องคำอธิบาย ---------- */
.hintbox { line-height: var(--kj-leading-loose); }
.hintbox > b:first-child { letter-spacing: .01em; }
.hintbox .note { display: inline-block; margin-top: var(--kj-space-1); }

/* ---------- คอนโซล ---------- */
.k-term { line-height: var(--kj-leading-base); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .03); }
.k-term::selection, .k-term *::selection { background: var(--kj-accent-soft); }
.k-term .log-info { color: var(--kj-text-dim); }
.k-term .log-ok { color: var(--kj-success); }
.k-term .log-warn { color: var(--kj-warning); }
.k-term .log-err { color: var(--kj-danger); }
.k-cmdbar input { font-family: var(--kj-font-mono); }

/* ---------- ตาราง ---------- */
.k-tablewrap { border-radius: var(--kj-radius-lg); }
th { letter-spacing: var(--kj-tracking-caps); }
tbody tr { transition: background var(--kj-dur-fast) var(--kj-ease-out); }
tbody tr:hover { background: var(--kj-surface-2); }
td { font-variant-numeric: tabular-nums; }

/* ---------- สถานะ ---------- */
.k-badge.on { background: rgba(36, 225, 139, .14); }
.k-dot.on { box-shadow: 0 0 0 4px rgba(36, 225, 139, .16); }
.k-badge, .k-dot:not(.off) { animation: none; }
#scBar { transition: width var(--kj-dur-slow) var(--kj-ease-out), background var(--kj-dur-base); }
@keyframes kj-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }
#scDot.warn { animation: kj-pulse 1.6s var(--kj-ease-inout) infinite; }
@media (prefers-reduced-motion: reduce) { #scDot.warn { animation: none; } }

/* ---------- Toast ---------- */
.k-toast {
  box-shadow: var(--kj-shadow-3);
  animation: kj-toast-in var(--kj-dur-base) var(--kj-ease-out);
}
@keyframes kj-toast-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ---------- ฟอร์ม ---------- */
input, textarea, select, .edit {
  font-family: inherit;
  transition: border-color var(--kj-dur-fast) var(--kj-ease-out);
}
input:hover, textarea:hover, select:hover, .edit:hover { border-color: var(--kj-border-strong); }
textarea.edit, .edit { font-family: var(--kj-font-mono); line-height: var(--kj-leading-base); }
.k-tabs button { transition: border-color var(--kj-dur-fast) var(--kj-ease-out), background var(--kj-dur-fast) var(--kj-ease-out); }
.k-copy, .copy { cursor: pointer; transition: color var(--kj-dur-fast) var(--kj-ease-out); }
.k-copy:hover, .copy:hover { color: var(--kj-accent-hover); }

/* ---------- Scrollbar ---------- */
* { scrollbar-color: var(--kj-border-strong) transparent; scrollbar-width: thin; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--kj-border-strong); border-radius: var(--kj-radius-pill);
  border: 2px solid var(--kj-bg);
}
::-webkit-scrollbar-thumb:hover { background: var(--kj-accent-press); }

/* ---------- ฟอร์มตั้งค่า (ใช้ในหน้า Server) ----------
 * ค่าบูลีน → สวิตช์ · ค่าตัวเลข → number · ค่าที่เลือกได้ → select · อื่น ๆ → text
 * ทั้งหมดเป็น layer เสริมของแดชบอร์ด ไม่มีผลกับคลาสโครงหลัก
 * --------------------------------------------------------------------- */
.k-formgrid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--kj-space-4);
}
.k-formgrid .k-wide { grid-column: 1 / -1; }

/* สวิตช์เปิด/ปิด */
.k-switch { position: relative; display: flex; align-items: center; gap: 10px; cursor: pointer; min-height: 24px; }
.k-switch input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.k-switch .k-switch-track {
  position: relative; width: 38px; height: 22px; flex: none; border-radius: var(--kj-radius-pill);
  background: var(--kj-bg-deep); border: 1px solid var(--kj-border);
  transition: background var(--kj-dur-fast) linear, border-color var(--kj-dur-fast) linear;
}
.k-switch .k-switch-track::after {
  content: ''; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%;
  background: var(--kj-text-dim); transition: transform var(--kj-dur-fast) linear, background var(--kj-dur-fast) linear;
}
.k-switch input:checked + .k-switch-track { background: var(--kj-accent-soft); border-color: var(--kj-accent-line); }
.k-switch input:checked + .k-switch-track::after { transform: translateX(16px); background: var(--kj-accent); }
.k-switch input:focus-visible + .k-switch-track { box-shadow: var(--kj-focus-ring); }
.k-switch input:disabled + .k-switch-track { opacity: .5; }
.k-switch .k-switch-lab { font-size: var(--kj-text-sm); color: var(--kj-text); }
/* สวิตช์มักอยู่ใน .k-field (ที่จัดสไตล์ให้ทุก span) → เคลียร์ระยะ/สีของชิ้นส่วนกลับ */
.k-field .k-switch .k-switch-track,
.k-field .k-switch .k-switch-lab { margin-bottom: 0; display: inline-block; color: var(--kj-text); }

/* ป้ายชื่อค่าตั้ง — ใหญ่และสว่างกว่าป้ายทั่วไปเพื่อให้อ่านง่ายในฟอร์มยาว ๆ */
.k-field .k-flab {
  display: block; font-size: var(--kj-text-sm); font-weight: var(--kj-weight-medium);
  color: var(--kj-text); margin-bottom: 7px; line-height: 1.45;
}
.k-field .k-flab .k-key,
.k-field .k-flab .k-key * {
  display: inline; margin-bottom: 0; font-size: var(--kj-text-xs);
  font-weight: var(--kj-weight-regular, 400); color: var(--kj-text-dim); opacity: 1;
}
/* ช่องกรอกในฟอร์มตั้งค่า — ใหญ่กว่าช่องทั่วไปเล็กน้อย + แตะง่ายขึ้น */
.k-formgrid .k-input,
.k-formgrid .k-select { font-size: var(--kj-text-md); padding: 11px 13px; }
.k-formgrid .k-fchild { display: flex; flex-direction: column; gap: 2px; }
.k-formgrid .k-field { min-width: 0; }   /* กันชื่อคีย์/คำอธิบายยาวดันคอลัมน์จนล้น */

/* หัวการ์ดกลุ่ม — ไม่ต้องเป็นตัวพิมพ์ใหญ่จิ๋ว ๆ ก็อ่านรู้เรื่อง */
.k-section > summary .k-lab {
  font-size: var(--kj-text-lg); font-weight: var(--kj-weight-semibold);
  color: var(--kj-text); text-transform: none; letter-spacing: 0;
}
.k-section > summary .k-key { font-size: var(--kj-text-xs); color: var(--kj-text-dim); font-weight: var(--kj-weight-regular, 400); }
.k-section .k-sectionbody { padding: var(--kj-space-4); }
.k-help { font-size: var(--kj-text-xs); }

/* ปุ่ม/แถบเครื่องมือของแต่ละกลุ่ม */
.k-section { padding: 0; overflow: hidden; }
.k-section > summary, .k-sectionhead {
  display: flex; align-items: center; gap: var(--kj-space-2); width: 100%;
  padding: var(--kj-space-3) var(--kj-space-4); cursor: pointer; list-style: none;
  background: none; border: none; color: inherit; text-align: left; font: inherit;
}
.k-section > summary::-webkit-details-marker { display: none }
.k-section > summary:hover { background: var(--kj-surface-2); }
.k-section[open] > summary { border-bottom: 1px solid var(--kj-border); }
.k-section .k-sectionbody { padding: var(--kj-space-4); }
.k-caret { margin-left: auto; color: var(--kj-text-dim); transition: transform var(--kj-dur-fast) linear; }
.k-section[open] .k-caret { transform: rotate(180deg); }
.k-count {
  font-size: var(--kj-text-xs); color: var(--kj-text-dim); background: var(--kj-surface-2);
  border: 1px solid var(--kj-border); border-radius: var(--kj-radius-pill); padding: 1px 8px;
}
.k-help { font-size: var(--kj-text-xs); color: var(--kj-text-dim); margin-top: 6px; line-height: 1.5; }
.k-key { font-family: var(--kj-font-mono); font-size: var(--kj-text-xs); color: var(--kj-text-dim); }
.k-formbar {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--kj-space-3);
  margin-bottom: var(--kj-space-3);
}
.k-formbar .k-input { width: auto; min-width: 220px; flex: 1; }

/* ---------- ยูทิลิตี้เล็ก ๆ ---------- */
.kj-num { font-variant-numeric: tabular-nums; }
.kj-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kj-sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.kj-kbd {
  font-family: var(--kj-font-mono); font-size: var(--kj-text-xs);
  background: var(--kj-surface-2); border: 1px solid var(--kj-border);
  border-bottom-width: 2px; border-radius: var(--kj-radius-xs);
  padding: 1px 6px;
}
.kj-scroll-x { overflow-x: auto; }

/* ============================================================================
 * ธีมที่ 2: "ink" — ดำ–เทาล้วน (พาเลตต์ --kj-ink-* ใน tokens/design-tokens.css)
 *
 * สลับด้วย data-theme="ink" ที่ <html> — ปุ่มเลือกธีมอยู่ใน sidebar (index.html)
 * ตัวเลือกถูกจำใน localStorage (คีย์ kj-theme · อ่านก่อนวาดหน้าที่ <head>)
 *
 * ที่นี่ทับเฉพาะ semantic ที่เป็นโทน navy + จุดที่ธีมหลัก hard-code สี navy ไว้
 * สีปุ่ม/สถานะ (เขียว Start · แดง Stop · ทองเตือน · ฟ้า accent) คงเดิมทั้งหมด
 * ========================================================================= */
:root[data-theme="ink"] {
  --kj-bg:              var(--kj-ink-950);
  --kj-bg-deep:         #050506;
  --kj-surface:         var(--kj-ink-850);
  --kj-surface-2:       var(--kj-ink-800);
  --kj-border:          var(--kj-ink-700);
  --kj-border-strong:   var(--kj-ink-600);

  --kj-text:            #ececed;
  --kj-text-dim:        var(--kj-ink-300);
  --kj-text-muted:      var(--kj-ink-400);

  --kj-secondary:       var(--kj-ink-800);
  --kj-secondary-hover: var(--kj-ink-700);
  --kj-offline:         var(--kj-ink-400);

  --kj-grad-card: linear-gradient(135deg, var(--kj-ink-850), var(--kj-ink-900));
  --kj-grad-side: linear-gradient(180deg, var(--kj-ink-850), var(--kj-ink-950));

  /* เงาให้กลืนกับพื้นดำ (เงาเดิมมีโทนน้ำเงิน) */
  --kj-shadow-1: 0 2px 8px rgba(0, 0, 0, .5);
  --kj-shadow-2: 0 8px 24px rgba(0, 0, 0, .45);
  --kj-shadow-3: 0 16px 40px rgba(0, 0, 0, .55);
}

/* จุดที่ธีมหลักเขียนสี navy ตรง ๆ ไว้ */
:root[data-theme="ink"] .k-meter { background: var(--kj-ink-800); }
:root[data-theme="ink"] .k-pill.off { background: rgba(168, 168, 176, .16); }
:root[data-theme="ink"] .k-heroart {
  background: radial-gradient(120% 120% at 30% 20%, var(--kj-ink-800) 0%, var(--kj-ink-900) 55%, var(--kj-ink-950) 100%);
}
:root[data-theme="ink"] .k-heroart.has-banner::after {
  background: linear-gradient(180deg, rgba(0, 0, 0, .12) 0%, rgba(0, 0, 0, .5) 58%, rgba(0, 0, 0, .88) 100%);
}
:root[data-theme="ink"] .k-heroart-tag { background: rgba(11, 11, 12, .72); }