/* ============================================================
   SAND369 ADMIN (w3) — shared component styles
   (ใช้คู่กับ Tailwind utilities; โทนสีเดียวกับ lotto-bet.html)
   ============================================================ */

:root {
  --page: #EAF0F8;   --card: #FFFFFF;  --card2: #F0F5FB;
  --line: #D3DEED;   --ink: #1D2A3A;   --sub: #64748B;
  /* --gold = สี accent (ตอนนี้คือ "ส้ม" — คงชื่อตัวแปรเดิมไว้ ทุกหน้าอ้างชื่อนี้อยู่) */
  --gold: #EA6A12;   --gold2: #FB923C; --gold-deep: #C2570A;
  --brand: #1C6FA8;  --ok: #449D44;    --bad: #D20202;
  --chart-1: #2a78d6; --chart-red: #e34948;
  --grid: #E0E8F2;   --delta-good: #006300;
  --field-line: #9FB2CC; --field-line-hover: #6E88AB;
}
.dark {
  --page: #0F1626;   --card: #182238;  --card2: #22304A;
  --line: #22304A;   --ink: #E8EEF6;   --sub: #93A4BC;
  --gold: #FB923C;   --gold2: #FB923C; --gold-deep: #EA6A12;
  --brand: #5AA9DA;  --ok: #5CB85C;    --bad: #E5565B;
  --chart-1: #3987e5; --chart-red: #e66767;
  --grid: #22304A;   --delta-good: #0ca30c;
  --field-line: #46587A; --field-line-hover: #6B82A8;
}

html { font-family: 'IBM Plex Sans Thai', 'Kanit', system-ui, -apple-system, "Segoe UI", sans-serif; }
body { -webkit-tap-highlight-color: transparent; }

/* ไอคอน SVG ที่ inject จาก app.js ไม่มี width/height ของตัวเอง — ให้ยืดเต็มกล่องพ่อ */
svg:not([width]) { width: 100%; height: 100%; display: block; }

/* ไอคอน Font Awesome ที่ inject ผ่าน APP.ICONS — จัดกึ่งกลาง + ปรับขนาดตามกล่องพ่อ
   (ใช้ i.w3fa เพื่อ specificity ชนะ .fa-solid ที่โหลดทีหลัง) */
i.w3fa { display: inline-flex !important; align-items: center; justify-content: center;
  width: 100%; height: 100%; line-height: 1; font-size: 0.94em; vertical-align: middle; }
/* กล่องที่ห่อไอคอน w3fa ให้จัดกึ่งกลางเสมอ (กัน line-box ของ display:block ดันไอคอนเยื้อง) */
:is(span, div, a, button):has(> i.w3fa) {
  display: inline-flex; align-items: center; justify-content: center; line-height: 0;
}

/* ---------- animations ---------- */
@keyframes fadeIn  { from { opacity: 0 } to { opacity: 1 } }
@keyframes slideUp { from { transform: translateY(18px); opacity: 0 } to { transform: translateY(0); opacity: 1 } }
@keyframes popIn   { 0% { transform: scale(.94); opacity: 0 } 100% { transform: scale(1); opacity: 1 } }
.backdropfx { animation: fadeIn .18s ease-out; }
.sheetfx    { animation: slideUp .22s cubic-bezier(.22,.61,.36,1); }
.toastfx    { animation: popIn .18s ease-out; }
.pagefx     { animation: fadeIn .22s ease-out; }
@media (prefers-reduced-motion: reduce) {
  .backdropfx, .sheetfx, .toastfx, .pagefx { animation: none !important; }
}

/* ระยะบนของเนื้อหาให้เท่ากันทุกหน้า: <style>/<script> ที่หลายหน้าใส่ไว้ใน @section('content') ก็เป็นลูกของ
   <main class="space-y-5"> — Tailwind (:not([hidden]) ~ :not([hidden])) เลยดันการ์ดแรกลงอีก 20px
   ทั้งที่ข้างบนไม่มีอะไรให้เห็น ตัวแรกที่มองเห็นได้จึงไม่ต้องมีระยะบน (ลูกที่มีของจริงอยู่ก่อน เช่นแถบแจ้งเตือน ไม่โดน) */
main.pagefx > :not(style, script, link, template):not(:not(style, script, link, template) ~ *) { margin-top: 0 !important; }

/* ---------- buttons ---------- */
.btn-gold, .btn-primary, .btn-ghost, .btn-danger, .btn-success {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border-radius: 12px; padding: 10px 18px; font-size: 14.5px; font-weight: 600;
  line-height: 1.25; cursor: pointer; transition: filter .15s, background-color .15s, transform .05s;
  border: 1px solid transparent; white-space: nowrap;
}
.btn-gold {
  color: #fff; background-image: linear-gradient(to bottom, #FB923C, #E45F0B);
  border-color: #C2570A;
  box-shadow: 0 2px 0 rgba(0,0,0,.14), 0 4px 10px rgba(234,106,18,.32);
}
.dark .btn-gold { color: #fff; background-image: linear-gradient(to bottom, #FB923C, #DD5E10); border-color: #C2570A; }
.btn-primary {
  color: #fff; background-image: linear-gradient(to bottom, #3093c7, #1c5a85);
  border-color: #25729a; box-shadow: 0 2px 0 rgba(0,0,0,.12);
}
.btn-success {
  color: #fff; background-image: linear-gradient(to bottom, #5cb85c, #449d44);
  border-color: #4cae4c; box-shadow: 0 2px 0 rgba(0,0,0,.12);
}
.btn-danger {
  color: #fff; background-image: linear-gradient(to bottom, #f0625e, #c9302c);
  border-color: #d43f3a; box-shadow: 0 2px 0 rgba(0,0,0,.12);
}
.btn-ghost { color: var(--sub); background: var(--card2); border-color: var(--line); }
.btn-ghost:hover { color: var(--ink); }
.btn-gold:hover, .btn-primary:hover, .btn-danger:hover, .btn-success:hover { filter: brightness(1.06); }
.btn-gold:active, .btn-primary:active, .btn-danger:active, .btn-success:active { transform: translateY(1px); }
.btn-gold:disabled, .btn-primary:disabled { opacity: .55; cursor: not-allowed; filter: none; }
.btn-sm { padding: 6px 12px; font-size: 13px; border-radius: 10px; }

/* ---------- ปุ่มมีช่องไอคอน (w2 .btn-labeled) — เวอร์ชันทันสมัย ใช้ร่วมทุกหน้า ----------
   โครง: <a class="btn-labeled lbl-info"><span class="btn-label">ไอคอน</span><span class="btn-text">ข้อความ</span></a> */
.btn-labeled {
  display: inline-flex; align-items: stretch; padding: 0; overflow: hidden;
  border-radius: 10px; color: #fff; font-size: 13.5px; font-weight: 600; line-height: 1.25;
  border: 1px solid transparent; text-decoration: none; white-space: nowrap; cursor: pointer;
  background-image: linear-gradient(180deg, var(--lbl-hi), var(--lbl-lo));
  border-color: var(--lbl-lo);
  box-shadow: 0 1px 0 rgba(255,255,255,.22) inset, 0 2px 0 rgba(0,0,0,.10), 0 4px 12px color-mix(in srgb, var(--lbl-lo) 32%, transparent);
  transition: filter .15s, transform .08s, box-shadow .15s;
}
.btn-labeled .btn-label {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 34px; padding: 0 10px; background: rgba(0,0,0,.16);
  border-right: 1px solid rgba(0,0,0,.10); font-size: 13px; line-height: 0;
}
.btn-labeled .btn-label > * { width: 1em; height: 1em; }
.btn-labeled .btn-text { display: inline-flex; align-items: center; padding: 8px 14px; }
.btn-labeled:hover { filter: brightness(1.07); box-shadow: 0 1px 0 rgba(255,255,255,.22) inset, 0 3px 0 rgba(0,0,0,.10), 0 6px 16px color-mix(in srgb, var(--lbl-lo) 42%, transparent); transform: translateY(-1px); }
.btn-labeled:active { transform: translateY(1px); box-shadow: 0 1px 0 rgba(0,0,0,.10); filter: brightness(.98); }
.btn-labeled:focus-visible { outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--lbl-lo) 35%, transparent); }
.btn-labeled.btn-xs .btn-text { padding: 4px 10px; font-size: 12.5px; }
.btn-labeled.btn-xs .btn-label { min-width: 28px; padding: 0 7px; font-size: 11.5px; }
/* โทนสี (ชื่อเดิมจาก w2) */
.lbl-info { --lbl-hi: #47C3F9; --lbl-lo: #1D8AE0; }
.lbl-blue { --lbl-hi: #3F8FD2; --lbl-lo: #1C5A85; }
.lbl-warn { --lbl-hi: #FDA65A; --lbl-lo: #E45F0B; }
.lbl-red  { --lbl-hi: #F0625E; --lbl-lo: #C9302C; }
.lbl-ok   { --lbl-hi: #63C97F; --lbl-lo: #3EA65B; }
.lbl-gray { --lbl-hi: #8796AB; --lbl-lo: #5A6A82; }

/* ---------- form controls ---------- */
.field { display: block; margin-bottom: 16px; }
.field > span {
  display: block; font-size: 13px; font-weight: 600; color: var(--sub); margin-bottom: 6px;
}
/* ขอบช่องกรอกใช้สีเข้มกว่าเส้นตาราง เพราะ --line จางไปเมื่อวางบนพื้นการ์ดสีขาว
   จนแยกไม่ออกว่าตรงไหนพิมพ์ได้ */
.input-f, select.input-f, textarea.input-f {
  /* เบราว์เซอร์ไม่ส่งฟอนต์ของหน้าลงไปใน input/select ให้เอง — ถ้าไม่สั่ง inherit
     ตัวหนังสือในช่องจะเป็นฟอนต์ default ของเครื่อง คนละแบบกับข้อความรอบ ๆ */
  font-family: inherit;
  width: 100%; font-size: 15px; color: var(--ink);
  background: var(--card); border: 1.5px solid var(--field-line);
  border-radius: 12px; padding: 10px 14px; outline: none;
  transition: border-color .15s, box-shadow .15s;
}
.input-f:hover:not(:disabled), select.input-f:hover:not(:disabled), textarea.input-f:hover:not(:disabled) {
  border-color: var(--field-line-hover);
}
.input-f:disabled, select.input-f:disabled, textarea.input-f:disabled {
  background: var(--card2); border-color: var(--line); color: var(--sub);
}
.input-f::placeholder { color: var(--sub); opacity: .65; }
.input-f:focus {
  border-color: var(--gold);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--gold) 22%, transparent);
}
.input-f.err { border-color: var(--bad); }
.input-f.err:focus { box-shadow: 0 0 0 3px color-mix(in srgb, var(--bad) 20%, transparent); }
select.input-f { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--sub) 50%), linear-gradient(135deg, var(--sub) 50%, transparent 50%); background-position: calc(100% - 19px) 55%, calc(100% - 14px) 55%; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 36px; }
/* เมนู dropdown (เลือกหวย/บัญชี) ตั้งสีตัวหนังสือเอง — เมนูห้อยอยู่ในหัวการ์ดหรือบนแถบบนที่
   ThemePresets ทาสีขาวไว้ ถ้าปล่อยให้สืบทอดสีมา ชื่อหวยจะขาวบนพื้นเมนูสีขาว = หายไปทั้งแถว */
.js-dd-menu { color: var(--ink); }

/* ปุ่มตัวเลือกหวยประจำหน้า (components/market-picker) — ทรงเดียวกับ select.input-f ตัวเตี้ยที่อยู่ข้างกัน */
.mkp-btn {
  background: var(--card); color: var(--ink); font-size: 13px; line-height: 1.35;
  border: 1.5px solid var(--field-line); border-radius: 10px; padding: 4px 10px;
  transition: border-color .15s;
}
.mkp-btn:hover { border-color: var(--field-line-hover); }

/* ตัวเลือกหวย + งวด ที่อยู่บนแถบหัวการ์ด = ชิ้นเดียวกัน (components/head-tools)
   เดิมสองตัวนี้คนละทรง — ปุ่มหวยเตี้ย ๆ กับ select งวดสูง 44px กว้างตายตัว 240px
   วางคู่กันบนแถบสีแล้วสูงไม่เท่า มุมไม่เท่า เหมือนของแปะทีหลังคนละชุด
   มุมโค้งไปอยู่ที่ชิ้นหัว/ท้ายแทน overflow:hidden ที่กล่อง — เมนูหวยห้อยอยู่ข้างในนี้ */
.hd-tools {
  display: inline-flex; align-items: stretch;
  background: var(--card); border-radius: 10px;
  box-shadow: 0 1px 2px rgba(15,23,42,.22), 0 0 0 1px rgba(255,255,255,.4);
}
/* .hd-tools.hd-tools = ให้ชนะคลาส display ที่ลูกแต่ละตัวติดมาเอง
   (market-picker = inline-block, draw-picker = flex) */
.hd-tools.hd-tools > * { display: flex; align-items: stretch; }
/* select-search แทรก .ss-wrap (display:block) คั่นกลางระหว่าง <form> กับปุ่มที่เห็นจริง
   ถ้าไม่ให้มันเป็น flex ด้วย ปุ่มจะไม่ยืดเต็มความสูงของแถบ */
.hd-tools .ss-wrap { display: flex; }
.hd-tools > * + * { border-left: 1px solid color-mix(in srgb, var(--field-line) 55%, transparent); }
/* .ss-btn = <select> ที่ตัวเลือกเกิน 20 จน select-search เปลี่ยนเป็นปุ่มที่มีช่องค้นหา
   — ซึ่งเกิดกับ dropdown งวดเกือบทุกหน้า ปุ่มนั้นยืมคลาส .input-f มาแต่ไม่ใช่ <select>
   จึงต้องเรียกชื่อไว้ด้วย ไม่งั้นมันคงทรง .input-f เต็ม — สูง 44px กว้างตายตัว 240px
   มีขอบมีมุมมีฟอนต์ของตัวเอง กลายเป็นกล่องซ้อนอยู่ในกล่อง คนละทรงกับปุ่มหวยที่ติดกัน */
.hd-tools :is(.mkp-btn, select.input-f, .ss-btn) {
  height: 34px; padding: 0 12px; font-size: 13.5px; font-weight: 600;
  border: 0; border-radius: 0; background-color: transparent; box-shadow: none;
  /* width:auto = กว้างตามตัวหนังสือ — บางหน้า (เลขชุด) ชื่อยาวมาก ต้องมีเพดาน */
  width: auto !important; max-width: 320px;
}
.hd-tools :is(select.input-f, .ss-btn) {
  /* ลูกศรของทั้งสองแบบวาดใหม่ให้เหมือนปุ่มหวย (ดูบล็อก .mkp-caret ข้างล่าง) */
  padding-right: 28px !important; background-image: none !important;
}
/* ตัวที่ยังเป็น <select> จริง (งวดน้อยกว่า 20 จึงไม่ถูกอัพเกรด): width:auto ของ <select>
   = กว้างตามตัวเลือกที่ยาวที่สุด งวดที่เลือกอยู่จึงมีที่ว่างค้างท้ายช่อง field-sizing:content กว้างตามงวดที่เลือกจริง
   (Chrome/Edge; เบราว์เซอร์ที่ไม่รู้จักก็ได้ auto แบบเดิม) */
.hd-tools select.input-f { field-sizing: content; }
/* มุมของชิ้นหัว/ท้าย ให้ตรงกับมุมของกล่อง ไม่งั้นพื้นตอน hover ล้นมุมออกมาเป็นเหลี่ยม */
.hd-tools > :first-child :is(.mkp-btn, select.input-f, .ss-btn) { border-radius: 10px 0 0 10px; }
.hd-tools > :last-child  :is(.mkp-btn, select.input-f, .ss-btn) { border-radius: 0 10px 10px 0; }
.hd-tools > :only-child  :is(.mkp-btn, select.input-f, .ss-btn) { border-radius: 10px; }
.hd-tools :is(.mkp-btn, select.input-f, .ss-btn):hover:not(:disabled) { background-color: var(--card2); }
.hd-tools :is(.mkp-btn, select.input-f, .ss-btn):focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; }

/* ลูกศรของตัวเลือกหวยกับตัวเลือกงวด = อันเดียวกัน
   เดิมปุ่มหวยใช้ตัวอักษร ▼ ส่วน select วาดสามเหลี่ยมแบน ๆ ด้วย gradient — คนละขนาด
   คนละสี วางต่อกันในกล่องเดียวแล้วเหมือนเอาของสองชุดมาแปะกัน */
.mkp-caret, .hd-tools .ss-caret, .hd-tools > form:has(> select.input-f)::after {
  content: ""; display: block; flex: none; width: 8px; height: 8px;
  color: var(--sub);
  border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor;
  border-radius: 0 0 2px 0;
  /* ตัวอักษรอยู่กลางกล่อง แต่หัวลูกศรชี้ลง น้ำหนักจึงเอียงลงล่าง ยกขึ้น 2px ให้ดูกลาง */
  transform: translateY(-2px) rotate(45deg);
}
.hd-tools > form:has(> select.input-f) { position: relative; }
.hd-tools > form:has(> select.input-f)::after,
.hd-tools .ss-caret {
  position: absolute; right: 11px; top: calc(50% - 4px); margin-top: 0; pointer-events: none;
}
/* .ss-caret เดิมเป็นสามเหลี่ยมทึบที่วาดด้วยขอบสามด้าน — สองด้านที่ไม่ได้เขียนทับต้องล้างเอง ไม่งั้นได้สองทรงซ้อนกัน */
.hd-tools .ss-caret { border-top: 0; border-left: 0; }

.input-icon { position: relative; }
.input-icon > .ico { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; color: var(--sub); pointer-events: none; display: flex; align-items: center; justify-content: center; line-height: 0; }
/* ไอคอน FA ในช่อง input — ขนาดคงที่ + กึ่งกลางกล่อง .ico (ไม่ยืด 100%) */
.input-icon > .ico i.w3fa { width: auto; height: auto; font-size: 16px; }
.input-icon > .input-f { padding-left: 40px; }
.input-icon > .tail { position: absolute; right: 11px; top: 50%; transform: translateY(-50%); width: 22px; height: 22px; color: var(--sub); cursor: pointer; }
.input-icon > .tail:hover { color: var(--ink); }

/* toggle switch */
.switch { position: relative; display: inline-block; width: 42px; height: 24px; flex-shrink: 0; }
.switch input { opacity: 0; width: 0; height: 0; }
.switch .track { position: absolute; inset: 0; border-radius: 9999px; background: var(--line); transition: background .18s; cursor: pointer; }
.switch .track::after { content: ""; position: absolute; left: 3px; top: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: transform .18s; }
.switch input:checked + .track { background: var(--ok); }
.switch input:checked + .track::after { transform: translateX(18px); }
.switch input:focus-visible + .track { box-shadow: 0 0 0 3px color-mix(in srgb, var(--ok) 30%, transparent); }

/* ---------- cards & tables ---------- */
.card-w { background: var(--card); border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 8px 24px rgba(23,58,110,.10); }
.dark .card-w { box-shadow: 0 8px 22px rgba(0,0,0,.38); }

/* ---------- หัวข้อการ์ด (panel header) ให้มีสีสวยขึ้น ---------- */
/* ===== แถบหัวการ์ดอัตโนมัติ = น้ำเงินทึบเต็มขอบ (แบบเดียวกับ .card-hd-blue) ทุกหน้า =====
   ครอบ: (ก) header ที่มี border-b เป็นลูกตัวแรก  (ข) การ์ด overflow-hidden ที่ลูกตัวแรกมีหัวข้อ h2
   ยกเว้น .card-hd ที่กำหนดสีเอง (addnumber) */
:is(
  .card-w > .border-b:first-child,
  .card-w.overflow-hidden > div:first-child:has(> h2.font-semibold),
  .card-w.overflow-hidden > div:first-child:has(> div > h2.font-semibold)
):not(.card-hd) {
  background-image: linear-gradient(135deg, #47C3F9 0%, #1D7FCE 55%, #0F63B0 100%) !important;
  border-bottom: 0 !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 2px 5px rgba(23,58,110,.16);
  color: #fff;
}
/* ตัวอักษร/องค์ประกอบภายในแถบหัวสีน้ำเงิน ให้อ่านออก */
.hd-scope-none {} /* (ตัวคั่นความอ่านง่าย) */
:is(
  .card-w > .border-b:first-child,
  .card-w.overflow-hidden > div:first-child:has(> h2.font-semibold),
  .card-w.overflow-hidden > div:first-child:has(> div > h2.font-semibold)
):not(.card-hd) :is(h2, h3).font-semibold {
  color: #fff !important; text-shadow: 0 1px 2px rgba(0,0,0,.22);
}
:is(
  .card-w > .border-b:first-child,
  .card-w.overflow-hidden > div:first-child:has(> h2.font-semibold),
  .card-w.overflow-hidden > div:first-child:has(> div > h2.font-semibold)
):not(.card-hd) :is(h2, h3).font-semibold::before {
  background-image: none !important; background: rgba(255,255,255,.9);
}
:is(
  .card-w > .border-b:first-child,
  .card-w.overflow-hidden > div:first-child:has(> h2.font-semibold),
  .card-w.overflow-hidden > div:first-child:has(> div > h2.font-semibold)
):not(.card-hd) :is(p, .text-sub) {
  color: rgba(255,255,255,.86) !important;
}
:is(
  .card-w > .border-b:first-child,
  .card-w.overflow-hidden > div:first-child:has(> h2.font-semibold),
  .card-w.overflow-hidden > div:first-child:has(> div > h2.font-semibold)
):not(.card-hd) :is(.btn-ghost, .btn-primary) {
  background: rgba(255,255,255,.2); background-image: none; color: #fff; border-color: rgba(255,255,255,.45);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.25);
}
:is(
  .card-w > .border-b:first-child,
  .card-w.overflow-hidden > div:first-child:has(> h2.font-semibold),
  .card-w.overflow-hidden > div:first-child:has(> div > h2.font-semibold)
):not(.card-hd) :is(.btn-ghost, .btn-primary):hover { background: rgba(255,255,255,.32); color: #fff; }
/* footer ที่มี border-t เป็นลูกตัวสุดท้ายของการ์ด → พื้นไล่เฉดจาง (คู่กับ header) */
.card-w > .border-t:last-child {
  background-image: linear-gradient(0deg, color-mix(in srgb, var(--brand) 6%, var(--card)), var(--card));
  border-top-color: color-mix(in srgb, var(--brand) 18%, var(--line)) !important;
}
/* หัวข้อ h2/h3 ในการ์ด → มีแท่งสีส้มนำหน้า + ตัวอักษรเข้ม (h3 = หัวข้อย่อย อ่านง่ายขึ้น) */
.card-w h2.font-semibold, .card-w h3.font-semibold {
  position: relative; padding-left: 13px; color: var(--ink);
}
.card-w h2.font-semibold::before, .card-w h3.font-semibold::before {
  content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: 4px; height: 1.05em; border-radius: 3px;
  background-image: linear-gradient(180deg, var(--gold2), var(--gold-deep));
}
/* h3 ที่อยู่ในแถบหัวสี card-hd ไม่ต้องเว้น padding พิเศษ (แท่งเป็นสีขาวอยู่แล้ว) */
.card-hd h3.font-semibold, .card-hd h2.font-semibold { padding-left: 13px; }

/* ---------- Card header เต็มความกว้าง ชิดขอบบนการ์ด (โครง header/body ชัด + มีมิติ) ---------- */
.card-hd, .head-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 11px 16px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 2px 5px rgba(23,58,110,.14);
}
.card-hd-blue   { background-image: linear-gradient(135deg, #47C3F9 0%, #1D7FCE 55%, #0F63B0 100%); }
.card-hd-orange { background-image: linear-gradient(135deg, #FDA65A 0%, #F1701A 55%, #DA5A08 100%); }
.card-hd-green  { background-image: linear-gradient(135deg, #63C97F 0%, #3EA65B 55%, #2F8C48 100%); }
.card-hd-slate  { background-image: linear-gradient(135deg, #64748B 0%, #4A586E 55%, #3B4759 100%); }
/* หัวข้อในแถบสี = ตัวอักษรขาว, แท่งนำหน้าเป็นสีขาว, ปุ่มโปร่งขาว */
.card-hd h2.font-semibold, .card-hd h3.font-semibold, .head-bar h2.font-semibold {
  color: #FFFFFF !important; text-shadow: 0 1px 2px rgba(0,0,0,.22);
}
.card-hd h2.font-semibold::before, .card-hd h3.font-semibold::before, .head-bar h2.font-semibold::before {
  background-image: none !important; background: rgba(255,255,255,.9);
}
.card-hd .btn-ghost, .head-bar .btn-ghost {
  background: rgba(255,255,255,.2); color: #FFFFFF; border-color: rgba(255,255,255,.4);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.25);
}
.card-hd .btn-ghost:hover, .head-bar .btn-ghost:hover { background: rgba(255,255,255,.32); color: #FFFFFF; }

.tbl { width: 100%; border-collapse: collapse; font-size: 14px; }
.tbl thead th {
  text-align: left; font-size: 12.5px; font-weight: 700; color: #46566E;
  padding: 10px 14px; border-bottom: 1px solid var(--line); white-space: nowrap;
  background-image: linear-gradient(180deg, #EFF2F7 0%, #E6EAF1 100%);
}
.dark .tbl thead th { color: #AEB9CC; background-image: linear-gradient(180deg, #232E42 0%, #1C2638 100%); border-bottom-color: #2A3852; }
/* เส้นบาง ๆ คั่นระหว่างคอลัมน์หัวตาราง ให้อ่านง่ายขึ้น */
.tbl thead th + th { box-shadow: inset 1px 0 0 rgba(70,86,110,.10); }
.dark .tbl thead th + th { box-shadow: inset 1px 0 0 rgba(255,255,255,.06); }
.tbl tbody td { padding: 11px 14px; border-bottom: 1px solid var(--line); color: var(--ink); }
.tbl tbody tr:last-child td { border-bottom: 0; }
.tbl tbody tr:hover td { background: color-mix(in srgb, var(--card2) 55%, transparent); }
.tbl tfoot td { padding: 11px 14px; font-weight: 700; color: var(--ink); background: var(--card2); }
.tbl .num { text-align: right; font-variant-numeric: tabular-nums; }
.tbl thead th.num { text-align: right; }

/* status chip */
.chip { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; border-radius: 9999px; padding: 3px 10px; }
.chip::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.chip-ok  { color: var(--ok);  background: color-mix(in srgb, var(--ok) 12%, transparent); }
.chip-off { color: var(--bad); background: color-mix(in srgb, var(--bad) 10%, transparent); }
.chip-wait{ color: var(--gold); background: color-mix(in srgb, var(--gold) 14%, transparent); }

/* ---------- charts ---------- */
.chart-tip {
  position: absolute; pointer-events: none; z-index: 10; display: none;
  background: var(--ink); color: var(--page);
  border-radius: 10px; padding: 7px 11px; font-size: 12.5px; line-height: 1.45;
  box-shadow: 0 6px 18px rgba(0,0,0,.25); white-space: nowrap;
}
.dark .chart-tip { background: #EEEAF6; color: #14101F; }
.chart-tip b { font-variant-numeric: tabular-nums; }
.bar-hit { fill: transparent; cursor: pointer; }
.bar-hit:hover + .bar-mark, .bar-mark.hov { filter: brightness(1.12); }

/* ---------- Sidebar โทนขาว-เทาแบบมีมิติ ---------- */
.sidebar-3d {
  background-image: linear-gradient(180deg, #FCFCFD 0%, #F1F3F7 55%, #E7EAF0 100%);
  border-right: 1px solid #DBDFE8;
  box-shadow: inset -10px 0 20px -14px rgba(30, 41, 59, .18), 4px 0 16px rgba(30, 41, 59, .05);
}
.dark .sidebar-3d {
  background-image: linear-gradient(180deg, #1B2536 0%, #172032 55%, #131B2B 100%);
  border-right: 1px solid #22304A;
  box-shadow: inset -10px 0 20px -14px rgba(0, 0, 0, .5), 4px 0 16px rgba(0, 0, 0, .3);
}

/* การ์ดผู้ใช้ — ยกลอยมีมิติ */
.sb-usercard {
  background-image: linear-gradient(180deg, #FFFFFF, #F4F6FA);
  border: 1px solid #E1E5EE;
  box-shadow: 0 2px 5px rgba(30, 41, 59, .07), inset 0 1px 0 #FFFFFF;
}
.dark .sb-usercard {
  background-image: linear-gradient(180deg, #22304A, #1B2536);
  border: 1px solid #2C3A54; box-shadow: 0 2px 6px rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255,255,255,.04);
}
.sb-name { color: #1D2A3A; } .dark .sb-name { color: #E8EEF6; }
.sb-role { color: #64748B; } .dark .sb-role { color: #93A4BC; }

/* หัวข้อกลุ่ม — ปกติโทนเงียบ ให้เฉพาะกลุ่มที่เปิดอยู่เด่นเป็นแถบไล่สี (ลำดับชั้นชัด) */
/* ปุ่มออกจากระบบท้าย sidebar — แดงไล่เฉดมีมิติ, hover เข้มขึ้น, กดแล้วยุบ */
.sb-logout {
  color: #fff; border: 1px solid #c0302c;
  background-image: linear-gradient(to bottom, #f0625e 0%, #d9383a 60%, #c22f2b 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.28), 0 2px 0 #9e2320, 0 3px 8px rgba(201,48,44,.30);
  text-shadow: 0 1px 0 rgba(0,0,0,.18);
  transition: background-image .15s, box-shadow .15s, transform .05s;
}
.sb-logout:hover {
  border-color: #9e2320;
  background-image: linear-gradient(to bottom, #d9433f 0%, #b8262a 60%, #a01f1c 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 2px 0 #7d1a17, 0 4px 10px rgba(160,31,28,.38);
}
.sb-logout:active { transform: translateY(2px); box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 0 0 #7d1a17, 0 1px 3px rgba(160,31,28,.3); }
.dark .sb-logout { border-color: #8f1f1c; box-shadow: inset 0 1px 0 rgba(255,255,255,.16), 0 2px 0 #6e1613, 0 3px 8px rgba(0,0,0,.45); }
.dark .sb-logout:hover { box-shadow: inset 0 1px 0 rgba(255,255,255,.10), 0 2px 0 #5a1210, 0 4px 10px rgba(0,0,0,.5); }

.sb-group { color: #3B4759; background: #D6E0EF; box-shadow: inset 0 0 0 1px #C2D0E3; }
.dark .sb-group { color: #B9C4D4; background: rgba(0,0,0,.26); box-shadow: inset 0 0 0 1px rgba(255,255,255,.07); }
.sb-group:hover { background: #C6D4E8; color: #1D2A3A; box-shadow: inset 0 0 0 1px #AFC1DA, 0 1px 3px rgba(30,41,59,.10); }
.dark .sb-group:hover { background: rgba(0,0,0,.34); color: #E8EEF6; box-shadow: inset 0 0 0 1px rgba(255,255,255,.10); }
.sb-gicon {
  color: #1D7FCE;
  background: #FFFFFF;
  box-shadow: inset 0 0 0 1px #DFE5EF, 0 1px 2px rgba(30,41,59,.08);
}
.dark .sb-gicon { color: #6FB6E8; background: rgba(255,255,255,.06); box-shadow: inset 0 0 0 1px rgba(255,255,255,.10); }
.sb-chev { color: #94A0B2; } .dark .sb-chev { color: #7C8798; }

/* กลุ่มที่เปิดอยู่ — แถบไล่สีโทนเดียวกับ topbar อยู่ในกรอบเดิม มุมโค้ง */
.menu-group[data-open="1"] .sb-group {
  color: #FFFFFF;
  background-image: linear-gradient(115deg, #2FA6EE 0%, #1D8AE0 50%, #0F5FB8 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 2px 6px rgba(15,95,184,.28);
}
.dark .menu-group[data-open="1"] .sb-group {
  color: #F2F7FD;
  background-image: linear-gradient(115deg, #1E5A96 0%, #1A4B80 50%, #123762 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 2px 6px rgba(0,0,0,.35);
}
.menu-group[data-open="1"] .sb-group:hover { filter: brightness(1.06); }
.menu-group[data-open="1"] .sb-gicon {
  color: #FFFFFF;
  background: rgba(255,255,255,.18);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35), inset 0 0 0 1px rgba(255,255,255,.22);
}
.dark .menu-group[data-open="1"] .sb-gicon { background: rgba(255,255,255,.12); box-shadow: inset 0 0 0 1px rgba(255,255,255,.15); }
.menu-group[data-open="1"] .sb-chev { color: rgba(255,255,255,.9); }

/* เมนูย่อย */
.sb-item { color: #5A667A; }
.dark .sb-item { color: #9AA6B8; }
.sb-item .sb-dot { background: #C4CBD8; transition: background .15s; }
.dark .sb-item .sb-dot { background: #3A4657; }
.sb-item:hover { background: #FFFFFF; color: #1D2A3A; box-shadow: 0 1px 3px rgba(30,41,59,.09); }
.dark .sb-item:hover { background: rgba(255,255,255,.05); color: #E8EEF6; box-shadow: none; }
.sb-item:hover .sb-dot { background: #94A0B2; }
.sb-item-on {
  color: #0F63B0 !important;
  background-image: linear-gradient(180deg, #EAF4FF, #D3E7FB);
  box-shadow: inset 0 0 0 1px #BAD8F5, inset 0 1px 0 #FFFFFF, 0 2px 7px rgba(15,99,176,.18);
}
.dark .sb-item-on {
  color: #7FC0F0 !important;
  background-image: linear-gradient(180deg, #1B3A57, #14304A);
  box-shadow: inset 0 0 0 1px #2C577E, 0 2px 7px rgba(0,0,0,.3);
}
.sb-item-on .sb-dot { background: #1D7FCE !important; }
.dark .sb-item-on .sb-dot { background: #5AA9DA !important; }

.sb-footer { border-top: 1px solid #DDE1EA; }
.dark .sb-footer { border-top: 1px solid #22304A; }

/* ---------- แถบสี header / หัว sidebar (ไล่เฉดฟ้า → น้ำเงิน) ---------- */
.topbar-color {
  background-image: linear-gradient(115deg, #38BDF8 0%, #1D8AE0 48%, #0F5FB8 100%);
  border-bottom: 1px solid #0C4E99 !important;
}
.dark .topbar-color {
  background-image: linear-gradient(115deg, #1E5A96 0%, #163F6E 55%, #102A4C 100%);
  border-bottom: 1px solid #22304A !important;
}
.topbar-color .tc-ink { color: #FFFFFF; text-shadow: 0 1px 2px rgba(9, 51, 100, .4); }
.dark .topbar-color .tc-ink { text-shadow: 0 1px 2px rgba(0, 0, 0, .45); }
.topbar-color .tc-btn { color: rgba(255, 255, 255, .92); }
.topbar-color .tc-btn:hover { background: rgba(255, 255, 255, .16); }
.topbar-color .tc-pill {
  background: rgba(255, 255, 255, .16); border: 1px solid rgba(255, 255, 255, .35);
  color: #FFFFFF; backdrop-filter: blur(4px);
}
.topbar-color .tc-pill b, .topbar-color .tc-pill span { color: #FFFFFF; }
.topbar-color .tc-pill .tc-count { color: #FFD166; font-weight: 700; }
.dark .topbar-color .tc-pill .tc-count { color: #FFC964; }

/* ---------- เก็บเมนูซ้าย (ปุ่มแฮมเบอร์เกอร์บน topbar, จอ ≥1024px) ---------- */
@media (min-width: 1024px) {
  html.sidebar-collapsed #sidebar { transform: translateX(-100%); }
  html.sidebar-collapsed .lg\:pl-72 { padding-left: 0 !important; }
  .lg\:pl-72 { transition: padding-left .2s cubic-bezier(.22,.61,.36,1); }
}

/* ---------- scrollbars ---------- */
.sidebar-scroll::-webkit-scrollbar, .tbl-scroll::-webkit-scrollbar { width: 6px; height: 6px; }
.sidebar-scroll::-webkit-scrollbar-thumb, .tbl-scroll::-webkit-scrollbar-thumb { background: var(--line); border-radius: 3px; }
.sidebar-scroll-dark::-webkit-scrollbar-thumb { background: #37424F; }
.tbl-scroll { overflow-x: auto; }

/* number displays */
.tabular { font-variant-numeric: tabular-nums; }

/* แท็บหวยบน header (w2: .language-menu — ตัวที่เลือกอยู่ถมสีเข้ม) */
.topbar-color .tc-tab { color: rgba(255, 255, 255, .9); border-bottom: 3px solid transparent; transition: background .15s; }
.topbar-color .tc-tab:hover { background: rgba(255, 255, 255, .12); }
.topbar-color .tc-tab.on { background: rgba(0, 0, 0, .22); color: #fff; border-bottom-color: #FFD166; }
.sb-usercard b { font-weight: 600; }

/* กล่องแจ้งสำเร็จ (flash session status) — เขียวอ่อนโปร่ง ไม่ทึบ */
.alert-ok {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px; border-radius: 12px; font-size: 14px;
  color: color-mix(in srgb, var(--ok) 70%, #000);
  background: color-mix(in srgb, var(--ok) 12%, var(--card));
  border: 1px solid color-mix(in srgb, var(--ok) 35%, transparent);
  box-shadow: 0 2px 8px color-mix(in srgb, var(--ok) 12%, transparent);
}
.alert-ok::before {
  content: "\f058"; font-family: "Font Awesome 6 Free"; font-weight: 900;
  color: var(--ok); font-size: 16px; flex: none;
}
.dark .alert-ok { color: color-mix(in srgb, var(--ok) 80%, #fff); }

/* แถบเตือน (เช่น เว็บไซต์ดูได้อย่างเดียว) — โครงเดียวกับ alert-ok สีส้ม accent */
.alert-warn {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px; border-radius: 12px; font-size: 14px;
  color: color-mix(in srgb, var(--gold-deep) 75%, #000);
  background: color-mix(in srgb, var(--gold) 12%, var(--card));
  border: 1px solid color-mix(in srgb, var(--gold) 40%, transparent);
}
.alert-warn::before {
  content: "\f06a"; font-family: "Font Awesome 6 Free"; font-weight: 900;
  color: var(--gold); font-size: 16px; flex: none;
}
.dark .alert-warn { color: color-mix(in srgb, var(--gold) 85%, #fff); }

/* ---------- confirm dialog ---------- */
.cfm-box { box-shadow: 0 24px 64px rgba(0,0,0,.28), 0 2px 8px rgba(0,0,0,.12); }
.cfm-ico { width: 64px; height: 64px; border-radius: 999px; display: grid; place-items: center; color: var(--cfm);
  background: color-mix(in srgb, var(--cfm) 12%, transparent); box-shadow: 0 0 0 8px color-mix(in srgb, var(--cfm) 6%, transparent); }
.cfm-ico > span { display: block; line-height: 1; font-size: 26px; }
.cfm-ico > span i { font-size: 26px; }
.cfm-ico svg { width: 28px; height: 28px; }
.cfm-btn { height: 44px; border-radius: 12px; font-size: 14.5px; font-weight: 600; border: 1px solid transparent; cursor: pointer;
  transition: transform .12s, box-shadow .12s, background .12s, filter .12s; }
.cfm-btn:active { transform: scale(.97); }
.cfm-cancel { color: var(--ink); background: var(--card2); border-color: var(--line); }
.cfm-cancel:hover { filter: brightness(.96); }
.dark .cfm-cancel:hover { filter: brightness(1.15); }
.cfm-ok { color: #fff; background: linear-gradient(180deg, color-mix(in srgb, var(--cfm) 85%, #fff) 0%, var(--cfm) 100%);
  box-shadow: 0 6px 16px color-mix(in srgb, var(--cfm) 35%, transparent), inset 0 1px 0 rgba(255,255,255,.22); }
.cfm-ok:hover { filter: brightness(1.06); box-shadow: 0 8px 20px color-mix(in srgb, var(--cfm) 45%, transparent), inset 0 1px 0 rgba(255,255,255,.25); }
.cfm-ok:focus-visible { outline: 2px solid var(--cfm); outline-offset: 2px; }

/* ---------- แถบเครื่องมือเหนือตาราง (ปุ่ม/ตัวกรอง) — พื้นเข้มกว่า card2 นิด + ขอบบาง ---------- */
.toolbar-bar { background: color-mix(in srgb, var(--card2) 60%, #C9D6E8); border: 1px solid color-mix(in srgb, var(--line) 70%, #9FB3CC); }
.dark .toolbar-bar { background: color-mix(in srgb, var(--card2) 70%, #0F1626); border-color: color-mix(in srgb, var(--line) 60%, #4A5A78); }

/* ---- Page loader (เต็มจอ) ---- */
#page-loader { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--page) 72%, transparent); backdrop-filter: blur(3px);
  opacity: 0; pointer-events: none; transition: opacity .18s ease; }
#page-loader.on { opacity: 1; pointer-events: auto; }
#page-loader .pl-box { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 26px 34px; border-radius: 16px;
  background: var(--card); border: 1px solid var(--line); box-shadow: 0 18px 48px rgba(23,58,110,.22); min-width: 200px;
  transform: translateY(6px); transition: transform .18s ease; }
#page-loader.on .pl-box { transform: none; }
#page-loader .pl-text { font-size: 13.5px; font-weight: 600; color: var(--ink); }
#page-loader .pl-spin { display: flex; gap: 7px; }
#page-loader .pl-spin span { width: 10px; height: 10px; border-radius: 50%; background: var(--brand); animation: pl-bounce .9s infinite ease-in-out; }
#page-loader .pl-spin span:nth-child(2) { animation-delay: .15s; background: var(--gold); }
#page-loader .pl-spin span:nth-child(3) { animation-delay: .3s; }
@keyframes pl-bounce { 0%, 80%, 100% { transform: scale(.55); opacity: .45; } 40% { transform: scale(1); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { #page-loader .pl-spin span { animation: none; opacity: 1; } }