/* ============================================================
   หลังบ้าน PocketTH — ธีม SOFT CARDS
   โทเคนมาจากระบบดีไซน์ที่เจ้าของเลือก (artifact "Arcadia Ops")
   กฎเต็มอยู่ที่ design-system/pocketth-admin/MASTER.md
   ============================================================ */
:root{
  /* ---- พื้นผิว ---- */
  --ink:#f2f2f3;        /* พื้นทั้งหน้า */
  --ink-2:#e9e9ea;      /* ผิวการ์ด */
  --rule:#d0d0d1;       /* เส้นคั่นหลัก = ตัวหนังสือ 16% ผสมพื้น */
  --rule-2:#e1e1e2;     /* เส้นคั่นย่อย = 8% */

  /* ---- ตัวหนังสือ ---- */
  --text:#1d1f20;       /* 13.6 บนการ์ด */
  --muted:#5d5d60;      /* 5.41 บนการ์ด */
  --faint:#66666a;      /* 4.71 บนการ์ด — จางสุดที่ยังผ่านเกณฑ์ ห้ามจางกว่านี้ */

  /* ---- สีเน้น: แยก 3 บทบาทเพราะ contrast ต่างกัน ไม่ได้แยกเพื่อความสวย ----
     --accent       ของตกแต่งที่ไม่ใช่ตัวหนังสือ (แถบหน้าที่อยู่ ขอบ)  3.42 พอสำหรับของไม่ใช่ข้อความ
     --accent-ink   ใช้กับตัวหนังสือ                                  5.33 ผ่านเกณฑ์
     --accent-solid ใช้เป็นพื้นหลังของตัวหนังสือสีขาว                  ขาวบนตัวนี้ 6.47 */
  --accent:#5980a6;
  --accent-ink:#416180;
  --accent-solid:#416180;
  --on-accent:#ffffff;

  --data:#597ea3;       /* แท่งกราฟ */
  --up:#416180;         /* ดีขึ้น */
  --dn:#a04a3f;         /* แย่ลง / ผิดพลาด  5.29 บนพื้น */

  /* ---- ตัวอักษร ---- */
  --fs-xs:12px; --fs-sm:14px; --fs-base:16px;
  --fs-lg:18px; --fs-xl:24px; --fs-2xl:32px;

  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-6:24px; --sp-8:32px;

  /* ---- การ์ด ---- */
  --radius:4px;                                   /* ตามระบบดีไซน์ ไม่ใช่มุมมนใหญ่ */
  --shadow:0 3px 10px rgba(43,43,45,.16);
  --shadow-lg:0 12px 32px rgba(43,43,45,.22);

  /* Barlow ไม่มีอักขระไทย ตัวไทยจึงตกไป Noto Sans Thai เอง — ลำดับนี้มาจากต้นฉบับ */
  --sans:"Barlow","Noto Sans Thai",system-ui,-apple-system,sans-serif;
  --head:"Barlow Condensed","Noto Sans Thai",system-ui,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,monospace;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--ink);color:var(--text);font-family:var(--sans);
  font-size:var(--fs-base);line-height:1.6;-webkit-font-smoothing:antialiased}
a{color:inherit}
:focus-visible{outline:2px solid var(--accent-ink);outline-offset:2px;border-radius:3px}

h1,h2,.kpi__v,.live__total,.rail__name{font-family:var(--head);font-weight:600}
.lbl{font-size:var(--fs-xs);letter-spacing:.06em;color:var(--muted);font-weight:500;margin:0}
.num{font-variant-numeric:tabular-nums}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ============================================================ โครงหน้า */
.app{display:grid;grid-template-columns:212px minmax(0,1fr);min-height:100vh}

.rail{padding:var(--sp-6) 0;display:flex;flex-direction:column;
  background:var(--ink-2);border-right:1px solid var(--rule)}
.rail__brand{display:flex;align-items:center;gap:10px;padding:0 20px var(--sp-6);
  text-decoration:none}
.rail__mark{width:28px;height:28px;border-radius:var(--radius);flex:none;
  background:var(--accent-solid);color:var(--on-accent);
  display:grid;place-items:center;font-weight:700;font-size:13px}
.rail__name{font-size:var(--fs-lg)}
.rail__grp{padding:var(--sp-4) 20px var(--sp-1);text-transform:uppercase;font-size:10px;
  letter-spacing:.1em;color:var(--accent-ink)}
.rail__nav{display:flex;flex-direction:column}
.rail__nav a,.rail__nav .soon{display:block;padding:7px 20px 7px 17px;text-decoration:none;
  color:var(--muted);font-size:var(--fs-sm);border-left:3px solid transparent;
  transition:color 180ms ease,border-color 180ms ease,background 180ms ease}
.rail__nav a:hover{color:var(--text);background:rgba(89,128,166,.09)}
.rail__nav a[aria-current]{color:var(--accent-ink);border-left-color:var(--accent);
  background:rgba(89,128,166,.14);font-weight:600}
/* หัวข้อที่ยังไม่ได้สร้าง เป็น <span> ไม่ใช่ลิงก์ จึงไม่มี cursor:pointer และ Tab ไม่ไปโดน */
.rail__nav .soon{color:var(--faint)}
.rail__foot{margin-top:auto;padding:var(--sp-4) 20px 0;border-top:1px solid var(--rule);
  font-size:var(--fs-xs);color:var(--faint)}

.main{min-width:0;padding:var(--sp-6) var(--sp-8) var(--sp-8)}

.head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;
  gap:var(--sp-3);padding-bottom:var(--sp-4);border-bottom:1px solid var(--rule)}
.head h1{font-size:var(--fs-xl);margin:0}
.head__meta{display:flex;align-items:center;gap:7px;margin:var(--sp-1) 0 0;
  font-size:var(--fs-xs);color:var(--muted)}
.dot{width:6px;height:6px;border-radius:50%;background:var(--up);flex:none}
.who{display:flex;align-items:center;gap:10px;font-size:var(--fs-xs);color:var(--muted)}
.who__ini{width:28px;height:28px;border-radius:50%;flex:none;display:grid;place-items:center;
  background:var(--accent-solid);color:var(--on-accent);font-size:var(--fs-xs);font-weight:600}
.who a{color:var(--accent-ink);text-decoration:none;transition:color 180ms ease}
.who a:hover{text-decoration:underline}

/* ============================================================ การ์ด */
.card{background:var(--ink-2);border-radius:var(--radius);box-shadow:var(--shadow);
  padding:var(--sp-4) 18px}

/* ---- แถบตัวเลขหลัก ---- */
.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--sp-3);padding:var(--sp-6) 0 0}
.kpi{background:var(--ink-2);border-radius:var(--radius);box-shadow:var(--shadow);
  padding:var(--sp-4) 18px}
.kpi__v{font-size:var(--fs-2xl);line-height:1.05;margin:var(--sp-2) 0 0;letter-spacing:-.01em}
.kpi__d{font-size:var(--fs-xs);margin:7px 0 0;color:var(--muted);
  display:flex;align-items:center;gap:5px}
.up{color:var(--up)}.dn{color:var(--dn)}

/* ---- คนออนไลน์ตอนนี้ ---- */
.live{display:grid;grid-template-columns:minmax(0,210px) minmax(0,1fr);gap:var(--sp-3);
  padding:var(--sp-3) 0 0}
.live>div{background:var(--ink-2);border-radius:var(--radius);box-shadow:var(--shadow);
  padding:var(--sp-4) 18px}
.live__total{font-size:var(--fs-2xl);line-height:1.05;margin:var(--sp-2) 0 0;
  color:var(--accent-ink)}
.live__total--off{color:var(--faint)}
.live__note{font-size:var(--fs-xs);color:var(--muted);margin:7px 0 0}
.live__warn{color:var(--dn)}

.srv{display:grid;grid-template-columns:repeat(auto-fill,minmax(158px,1fr));
  gap:var(--sp-4) var(--sp-6)}
.srv__head{display:flex;align-items:baseline;justify-content:space-between;gap:var(--sp-2)}
.srv__name{font-size:var(--fs-sm);font-weight:600}
.srv__n{font-variant-numeric:tabular-nums;font-size:var(--fs-sm);font-weight:600}
.srv__n--off{font-size:var(--fs-xs);color:var(--dn);font-weight:400}
.srv__bar{height:4px;background:var(--rule);border-radius:99px;overflow:hidden;margin:6px 0 0}
.srv__fill{display:block;height:100%;background:var(--data);border-radius:99px}
.srv__key{display:block;font-family:var(--mono);font-size:var(--fs-xs);color:var(--faint);
  margin:5px 0 0}

/* ---- สองคอลัมน์ ---- */
.cols{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:var(--sp-3);
  padding-top:var(--sp-3)}
.cols--form{grid-template-columns:minmax(0,380px) minmax(0,1fr)}
.col{min-width:0;background:var(--ink-2);border-radius:var(--radius);
  box-shadow:var(--shadow);padding:18px}
.sec{display:flex;align-items:baseline;justify-content:space-between;gap:var(--sp-3);
  margin:0 0 var(--sp-4)}
.sec h2{font-size:var(--fs-lg);margin:0}

/* ============================================================ กราฟ */
.chart{position:relative;padding-top:20px}
.chart__max{position:absolute;top:0;right:0;font-size:var(--fs-xs);color:var(--faint)}
/* 🔴 align-items ต้องเป็น stretch ที่ชั้นนอก ไม่ใช่ flex-end
   ถ้าเป็น flex-end ตัว <li> จะหดเท่าเนื้อหา แล้ว height:% ของแท่งจะอ้างอิงกับศูนย์
   ⇒ แท่งกราฟแบนเป็นเส้นทุกแท่ง (เคยพลาดมาแล้ว) */
.bars{display:flex;align-items:stretch;gap:5px;height:126px;
  border-bottom:1px solid var(--rule);margin:0;padding:0;list-style:none}
.bars li{flex:1;display:flex;align-items:flex-end;min-width:0}
.bar{display:block;width:100%;background:var(--data);border-radius:2px 2px 0 0;min-height:2px;
  border:0;padding:0;cursor:default;position:relative;transition:background 180ms ease}
.bar:hover,.bar:focus-visible{background:var(--accent-ink)}
.bar--now{background:var(--accent-ink)}
/* ป้ายค่าที่โผล่ทั้งตอนชี้เมาส์และตอน Tab มาถึง */
.bar::after{content:attr(data-tip);position:absolute;bottom:calc(100% + 6px);left:50%;
  transform:translateX(-50%);white-space:nowrap;font:500 var(--fs-xs)/1 var(--sans);
  background:var(--text);color:var(--ink);padding:5px 8px;border-radius:var(--radius);
  opacity:0;pointer-events:none;transition:opacity 180ms ease;z-index:2}
.bar:hover::after,.bar:focus-visible::after{opacity:1}
.xax{display:flex;justify-content:space-between;font-size:var(--fs-xs);color:var(--faint);
  margin:var(--sp-2) 0 0}
.chart__toggle{margin:var(--sp-3) 0 0}

/* ============================================================ ตาราง */
.scroll{overflow-x:auto}
.tbl{width:100%;border-collapse:collapse;font-size:var(--fs-sm)}
.tbl th{text-align:left;font-weight:500;font-size:var(--fs-xs);letter-spacing:.05em;
  color:var(--muted);padding:0 0 var(--sp-2);border-bottom:1px solid var(--rule);
  white-space:nowrap}
.tbl th:last-child,.tbl td:last-child{text-align:right}
.tbl td{padding:var(--sp-2) 0;border-bottom:1px solid var(--rule-2);vertical-align:middle}
.tbl td:last-child{font-variant-numeric:tabular-nums;font-weight:600;padding-left:var(--sp-4)}
.tbl tr:last-child td{border-bottom:0}
.key{font-family:var(--mono);font-size:var(--fs-xs);color:var(--text)}
.desc{display:block;color:var(--faint);font-size:var(--fs-xs);margin:2px 0 0}
.share{height:3px;background:var(--accent);opacity:.55;margin:6px 0 0;border-radius:99px}

/* ============================================================ ปุ่ม / ฟอร์ม
   พื้นที่กด: บนอุปกรณ์สัมผัสต้องไม่ต่ำกว่า 44px (นิ้วไม่แม่นเท่าเมาส์)
   บนเดสก์ท็อปที่ชี้ด้วยเมาส์ยอมให้แน่นกว่าได้ เพราะหน้านี้เป็นเครื่องมือใช้งานยาว ๆ
   ปุ่มหลักให้ 44px ทุกอุปกรณ์ เพราะเป็นปุ่มเดียวที่ต้องกดให้ติดแน่ ๆ */
.btn{font:600 var(--fs-sm)/1 var(--sans);padding:10px 18px;border-radius:var(--radius);
  min-height:38px;border:1px solid var(--rule);background:var(--ink);color:var(--text);
  cursor:pointer;transition:background 180ms ease,border-color 180ms ease}
.btn:hover{background:#fff;border-color:var(--accent)}
.btn--go{background:var(--accent-solid);border-color:var(--accent-solid);
  color:var(--on-accent);min-height:44px}
.btn--go:hover{background:#375371;border-color:#375371}
.btn[disabled]{opacity:.5;cursor:not-allowed}
.btn--sm{padding:6px 12px;font-size:var(--fs-xs);min-height:30px}

@media (pointer:coarse){
  .btn,.btn--sm{min-height:44px;padding-left:18px;padding-right:18px}
}

.f-row{margin:0 0 var(--sp-4)}
.f-label{display:block;font-size:var(--fs-xs);color:var(--muted);margin:0 0 6px}
.f-input{width:100%;padding:11px 13px;font:400 var(--fs-base)/1.4 var(--sans);
  background:var(--ink);border:1px solid var(--rule);border-radius:var(--radius);
  color:var(--text);transition:border-color 180ms ease}
.f-input:focus{outline:none;border-color:var(--accent)}
.f-err{font-size:var(--fs-xs);color:var(--dn);margin:6px 0 0}
.f-help{font-size:var(--fs-xs);color:var(--faint);margin:6px 0 0;line-height:1.55}
select.f-input{appearance:none;cursor:pointer;
  /* ลูกศรวาดด้วย CSS ไม่ใช้ไฟล์ภาพ เพราะ CSP ห้ามโหลดของนอก */
  background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),
                   linear-gradient(135deg,var(--muted) 50%,transparent 50%);
  background-position:calc(100% - 18px) calc(50% + 1px),calc(100% - 13px) calc(50% + 1px);
  background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-right:38px}
.f-check{display:flex;align-items:center;gap:9px;cursor:pointer;font-size:var(--fs-sm)}
.f-check input{width:17px;height:17px;accent-color:var(--accent-solid);cursor:pointer}

.note{background:var(--ink-2);border-left:3px solid var(--rule);border-radius:var(--radius);
  box-shadow:var(--shadow);padding:var(--sp-3) var(--sp-4);margin:var(--sp-4) 0 0;
  font-size:var(--fs-sm)}
.note--ok{border-left-color:var(--up)}
.note--bad{border-left-color:var(--dn)}

.pill{display:inline-block;font-size:var(--fs-xs);padding:3px 9px;border-radius:999px;
  border:1px solid var(--rule);white-space:nowrap}
.pill--on{color:var(--up);border-color:var(--up)}
.pill--wait{color:var(--accent-ink);border-color:var(--accent)}
.pill--off{color:var(--faint)}

.lnk{background:none;border:0;padding:0;font:inherit;font-size:var(--fs-xs);
  color:var(--accent-ink);cursor:pointer;text-decoration:none;transition:color 180ms ease}
.lnk:hover{text-decoration:underline}
.lnk--danger{color:var(--dn)}
.inline{display:inline}
.row-act{white-space:nowrap;display:flex;gap:var(--sp-3);justify-content:flex-end;align-items:center}
.news-t{display:block;font-size:var(--fs-sm)}
tr.is-editing td{background:rgba(89,128,166,.12)}

.empty{color:var(--muted);font-size:var(--fs-sm);padding:var(--sp-6) 0;text-align:center;
  border:1px dashed var(--rule);border-radius:var(--radius)}

/* ============================================================ หน้าล็อกอิน */
.gate{min-height:100vh;display:grid;place-items:center;padding:var(--sp-6)}
.gate__box{width:100%;max-width:352px;background:var(--ink-2);border-radius:var(--radius);
  box-shadow:var(--shadow-lg);padding:var(--sp-8)}
.gate__brand{display:flex;align-items:center;gap:10px;margin:0 0 var(--sp-6)}
.gate h1{font-size:var(--fs-lg);margin:0 0 var(--sp-1)}
.gate__sub{color:var(--muted);font-size:var(--fs-xs);margin:0 0 var(--sp-6)}
.gate__alert{background:var(--ink);border-left:3px solid var(--dn);border-radius:var(--radius);
  padding:var(--sp-3) var(--sp-4);margin:0 0 var(--sp-4);font-size:var(--fs-sm)}
.gate__foot{margin:var(--sp-6) 0 0;font-size:var(--fs-xs);color:var(--faint);line-height:1.7}

/* ============================================================ มือถือ */
@media(max-width:900px){
  .app{grid-template-columns:1fr}
  .rail{flex-direction:row;flex-wrap:wrap;align-items:center;gap:2px;
    border-right:0;border-bottom:1px solid var(--rule);padding:var(--sp-3) var(--sp-4)}
  .rail__brand{padding:0 var(--sp-4) 0 0}
  /* บนมือถือซ่อนหัวข้อที่ยังไม่ได้สร้าง ไม่งั้นเมนูกินพื้นที่หลายบรรทัด
     ก่อนถึงเนื้อหาจริง ทั้งที่กดไม่ได้สักอัน — พอสร้างหน้าเสร็จมันจะโผล่มาเอง */
  .rail__grp,.rail__foot,.rail__nav .soon{display:none}
  .rail__nav{flex-direction:row;flex-wrap:wrap}
  .rail__nav a,.rail__nav .soon{padding:5px 10px;border-left:0;border-bottom:3px solid transparent}
  .rail__nav a[aria-current]{border-left:0;border-bottom-color:var(--accent)}
  .main{padding:var(--sp-4) var(--sp-4) var(--sp-8)}
  .kpis{grid-template-columns:repeat(2,1fr)}
  .live,.cols,.cols--form{grid-template-columns:1fr}
  /* บนจอแคบ ป้ายค่าของแท่งซ้ายสุด/ขวาสุดจะล้นขอบ ให้ดันเข้ามา */
  .bars li:first-child .bar::after{left:0;transform:none}
  .bars li:last-child .bar::after{left:auto;right:0;transform:none}
}

@media(prefers-reduced-motion:reduce){
  *{transition-duration:1ms !important;animation-duration:1ms !important}
}