/* ============================================================
   Theme Engine (token-based) — ธีมชุดขยาย
   ============================================================
   ธีมเดิม (red / huay) เขียนสีตรงๆ ทีละ rule จึงเพิ่มธีมใหม่ทีต้องก๊อป CSS ยาวๆ
   ไฟล์นี้แยก "โครงสร้าง" ออกจาก "สี": เขียน rule ครั้งเดียวให้ทุกธีมที่ชื่อขึ้นต้น t-
   แล้วธีมใหม่ 1 ชุด = กำหนดตัวแปรสีประมาณ 15 บรรทัดเท่านั้น

   ตั้งชื่อ:  t-<ชื่อ>        = โหมดสว่าง
             t-<ชื่อ>-dark   = โหมดเข้ม (คู่กับ data-bs-theme="dark")

   ตัวแปรที่แต่ละธีมต้องกำหนด:
     --p1 สีแบรนด์หลัก · --p2 สีแบรนด์เข้ม · --p3 เข้มสุด (ใช้ไล่เฉด hero)
     --acc สีเน้น/ปุ่ม CTA · --acc2 คู่ไล่เฉดของ acc · --on-acc ตัวอักษรบนพื้น acc
     --sh  ค่า r,g,b ของเงา (ใช้กับ rgba())
   ธีมเข้มกำหนดเพิ่ม: --bg1/--bg2 พื้นหน้าเว็บ · --cd1/--cd2 พื้นการ์ด · --ink/--ink2 ตัวอักษร
   ============================================================ */

/* ─────────────── จานสี: โหมดสว่าง ─────────────── */
html[data-theme="t-ocean"] {
  --p1:#0077b6; --p2:#023e8a; --p3:#03045e; --acc:#48cae4; --acc2:#0096c7; --on-acc:#012a4a; --sh:2,61,138;
}
html[data-theme="t-emerald"] {
  --p1:#2d6a4f; --p2:#1b4332; --p3:#081c15; --acc:#ffd60a; --acc2:#e0a800; --on-acc:#081c15; --sh:27,67,50;
}
html[data-theme="t-violet"] {
  --p1:#7209b7; --p2:#560bad; --p3:#3a0ca3; --acc:#ffd60a; --acc2:#e0a800; --on-acc:#2b0a52; --sh:86,11,173;
}
html[data-theme="t-sunset"] {
  --p1:#f3722c; --p2:#d00000; --p3:#6a040f; --acc:#ffba08; --acc2:#f48c06; --on-acc:#4a1200; --sh:208,0,0;
}
html[data-theme="t-onyx"] {
  --p1:#343a40; --p2:#212529; --p3:#0b0c0d; --acc:#c9a227; --acc2:#9c7a10; --on-acc:#16181a; --sh:33,37,41;
}

/* ─────────────── จานสี: โหมดเข้ม ─────────────── */
html[data-theme="t-ocean-dark"] {
  --p1:#48cae4; --p2:#0096c7; --p3:#023e8a; --acc:#48cae4; --acc2:#00b4d8; --on-acc:#012a4a; --sh:0,0,0;
  --bg1:#032a4a; --bg2:#011627; --cd1:#083358; --cd2:#04223c; --ink:#e8f6ff; --ink2:#a8cbe0;
}
html[data-theme="t-emerald-dark"] {
  --p1:#ffd60a; --p2:#52b788; --p3:#1b4332; --acc:#ffd60a; --acc2:#e0a800; --on-acc:#081c15; --sh:0,0,0;
  --bg1:#14432f; --bg2:#081c15; --cd1:#1a5038; --cd2:#0f2e20; --ink:#eaf7ef; --ink2:#a9ceb8;
}
html[data-theme="t-violet-dark"] {
  --p1:#ffd60a; --p2:#b5179e; --p3:#560bad; --acc:#ffd60a; --acc2:#e0a800; --on-acc:#2b0a52; --sh:0,0,0;
  --bg1:#3a0f63; --bg2:#1d0637; --cd1:#441273; --cd2:#2a0a4d; --ink:#f4ecff; --ink2:#c6aee6;
}
html[data-theme="t-sunset-dark"] {
  --p1:#ffba08; --p2:#f48c06; --p3:#9d0208; --acc:#ffba08; --acc2:#f48c06; --on-acc:#4a1200; --sh:0,0,0;
  --bg1:#5c1407; --bg2:#2d0a04; --cd1:#6b1a09; --cd2:#3d0d05; --ink:#fff1e2; --ink2:#e6bc99;
}
html[data-theme="t-onyx-dark"] {
  --p1:#c9a227; --p2:#8d7118; --p3:#3a3a3a; --acc:#c9a227; --acc2:#9c7a10; --on-acc:#16181a; --sh:0,0,0;
  --bg1:#1b1d1f; --bg2:#0b0c0d; --cd1:#232628; --cd2:#151718; --ink:#f1f1f1; --ink2:#b6b6b6;
}

/* ============================================================
   โครงสร้างร่วม — โหมดสว่าง (ทุกธีม t-* ที่ไม่ใช่ -dark)
   ============================================================ */
html[data-theme^="t-"]:not([data-theme$="-dark"]) {
  --brand-1: var(--p1);
  --brand-2: var(--p2);
  --brand-grad: linear-gradient(135deg, var(--p1) 0%, var(--p2) 100%);
  --brand-grad-soft: linear-gradient(135deg, rgba(var(--sh), .08), rgba(var(--sh), .12));
  --surface: #ffffff;
  --surface-2: rgba(var(--sh), .05);
  --line: rgba(var(--sh), .15);
  --input-border: rgba(var(--sh), .35);
  --input-border-hover: rgba(var(--sh), .6);
}
html[data-theme^="t-"]:not([data-theme$="-dark"]) .navbar-brand { color: var(--acc) !important; }
html[data-theme^="t-"]:not([data-theme$="-dark"]) .navbar,
html[data-theme^="t-"]:not([data-theme$="-dark"]) .navbar.sticky-top {
  box-shadow: 0 2px 14px rgba(var(--sh), .3) !important;
}
html[data-theme^="t-"]:not([data-theme$="-dark"]) .btn-primary {
  box-shadow: 0 4px 12px rgba(var(--sh), .3);
}
html[data-theme^="t-"]:not([data-theme$="-dark"]) .btn-primary:hover,
html[data-theme^="t-"]:not([data-theme$="-dark"]) .btn-primary:focus {
  box-shadow: 0 6px 18px rgba(var(--sh), .42);
}
html[data-theme^="t-"]:not([data-theme$="-dark"]) .form-control:focus,
html[data-theme^="t-"]:not([data-theme$="-dark"]) .form-select:focus {
  box-shadow: 0 0 0 .2rem rgba(var(--sh), .18);
}
html[data-theme^="t-"]:not([data-theme$="-dark"]) .btn-warning {
  background: linear-gradient(135deg, var(--acc), var(--acc2));
  color: var(--on-acc); border: 0; font-weight: 700;
}
html[data-theme^="t-"]:not([data-theme$="-dark"]) .rounds-hero {
  background: linear-gradient(135deg, var(--p1) 0%, var(--p2) 55%, var(--p3) 100%);
  box-shadow: 0 20px 60px rgba(var(--sh), .4), inset 0 1px 0 rgba(255,255,255,.18);
}
html[data-theme^="t-"]:not([data-theme$="-dark"]) .rounds-hero .btn-light { color: var(--p2) !important; }
html[data-theme^="t-"]:not([data-theme$="-dark"]) .rounds-hero .btn-light:hover { color: var(--p3) !important; }
html[data-theme^="t-"]:not([data-theme$="-dark"]) .btn-play {
  background: linear-gradient(135deg, var(--p1), var(--p2));
  box-shadow: 0 8px 20px rgba(var(--sh), .4);
}
html[data-theme^="t-"]:not([data-theme$="-dark"]) .btn-play:hover {
  box-shadow: 0 15px 35px rgba(var(--sh), .55);
}
html[data-theme^="t-"]:not([data-theme$="-dark"]) .nav-pills .nav-link.active,
html[data-theme^="t-"]:not([data-theme$="-dark"]) .type-picker .btn-check:checked + .btn {
  background: var(--brand-grad) !important; border-color: transparent !important; color: #fff !important;
}
html[data-theme^="t-"]:not([data-theme$="-dark"]) .digit-boxes .digit-box.filled {
  border-color: var(--p1);   /* สีตัวเลขไม่แตะ — ใช้ดำจาก style.css ทุกธีม */
}
html[data-theme^="t-"]:not([data-theme$="-dark"]) .bottom-nav {
  box-shadow: 0 -2px 16px rgba(var(--sh), .18);
}
html[data-theme^="t-"]:not([data-theme$="-dark"]) .bottom-nav-item.active,
html[data-theme^="t-"]:not([data-theme$="-dark"]) .bottom-nav-item:hover { color: var(--p1); }
html[data-theme^="t-"]:not([data-theme$="-dark"]) .bottom-nav-item.active::before { background: var(--brand-grad); }

/* ============================================================
   โครงสร้างร่วม — โหมดเข้ม (t-*-dark)
   ============================================================ */
html[data-theme^="t-"][data-theme$="-dark"] {
  --brand-1: var(--p1);
  --brand-2: var(--p2);
  --on-brand: var(--on-acc);
  --brand-grad: linear-gradient(135deg, var(--p2) 0%, var(--p3) 100%);
  --brand-grad-soft: linear-gradient(135deg, rgba(255,255,255,.08), rgba(255,255,255,.04));
  --surface: var(--cd1);
  --surface-2: var(--cd2);
  --line: rgba(255,255,255,.16);
  --input-border: rgba(255,255,255,.28);
  --input-border-hover: var(--acc);
}
html[data-theme^="t-"][data-theme$="-dark"] body,
html[data-theme^="t-"][data-theme$="-dark"] body.bg-body-tertiary {
  background:
    radial-gradient(1200px 620px at 50% -12%, var(--bg1) 0%, transparent 60%),
    linear-gradient(180deg, var(--bg1) 0%, var(--bg2) 100%) !important;
  background-attachment: fixed !important;
  color: var(--ink);
}
html[data-theme^="t-"][data-theme$="-dark"] .navbar-brand { color: var(--acc) !important; }
html[data-theme^="t-"][data-theme$="-dark"] .navbar,
html[data-theme^="t-"][data-theme$="-dark"] .navbar.sticky-top {
  box-shadow: 0 2px 16px rgba(0,0,0,.45) !important;
}
html[data-theme^="t-"][data-theme$="-dark"] .card,
html[data-theme^="t-"][data-theme$="-dark"] .lotto-card,
html[data-theme^="t-"][data-theme$="-dark"] .modal-content,
html[data-theme^="t-"][data-theme$="-dark"] .dropdown-menu,
html[data-theme^="t-"][data-theme$="-dark"] .offcanvas,
html[data-theme^="t-"][data-theme$="-dark"] .list-group-item {
  background: linear-gradient(180deg, var(--cd1) 0%, var(--cd2) 100%) !important;
  color: var(--ink) !important;
  border-color: rgba(255,255,255,.14) !important;
}
html[data-theme^="t-"][data-theme$="-dark"] .card-header,
html[data-theme^="t-"][data-theme$="-dark"] .card-footer,
html[data-theme^="t-"][data-theme$="-dark"] .modal-header,
html[data-theme^="t-"][data-theme$="-dark"] .modal-footer {
  background: rgba(0,0,0,.18) !important;
  color: var(--ink) !important;
  border-color: rgba(255,255,255,.12) !important;
}
html[data-theme^="t-"][data-theme$="-dark"] .lotto-card h6 { color: var(--ink) !important; }
html[data-theme^="t-"][data-theme$="-dark"] .lotto-card .round-name,
html[data-theme^="t-"][data-theme$="-dark"] .meta-row,
html[data-theme^="t-"][data-theme$="-dark"] .text-muted { color: var(--ink2) !important; }
html[data-theme^="t-"][data-theme$="-dark"] .lotto-card .card-body { background: transparent !important; }
html[data-theme^="t-"][data-theme$="-dark"] .form-control,
html[data-theme^="t-"][data-theme$="-dark"] .form-select,
html[data-theme^="t-"][data-theme$="-dark"] .input-group-text {
  background: var(--cd2) !important;
  color: var(--ink) !important;
  border-color: var(--input-border) !important;
  border-width: 2px !important;
}
html[data-theme^="t-"][data-theme$="-dark"] .form-control:focus,
html[data-theme^="t-"][data-theme$="-dark"] .form-select:focus {
  border-color: var(--acc) !important;
  box-shadow: 0 0 0 .2rem rgba(255,255,255,.12) !important;
}
html[data-theme^="t-"][data-theme$="-dark"] .btn-warning {
  background: linear-gradient(135deg, var(--acc), var(--acc2));
  color: var(--on-acc); border: 0; font-weight: 700;
}
html[data-theme^="t-"][data-theme$="-dark"] .rounds-hero {
  background: linear-gradient(135deg, var(--p2) 0%, var(--p3) 100%);
  box-shadow: 0 20px 60px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.12);
}
html[data-theme^="t-"][data-theme$="-dark"] .rounds-hero .btn-light {
  background: var(--acc) !important; color: var(--on-acc) !important; border: 0;
}
html[data-theme^="t-"][data-theme$="-dark"] .btn-play {
  background: linear-gradient(135deg, var(--acc), var(--acc2));
  color: var(--on-acc);
  box-shadow: 0 8px 20px rgba(0,0,0,.45);
}
html[data-theme^="t-"][data-theme$="-dark"] .nav-pills .nav-link.active,
html[data-theme^="t-"][data-theme$="-dark"] .type-picker .btn-check:checked + .btn {
  background: linear-gradient(135deg, var(--acc), var(--acc2)) !important;
  border-color: transparent !important; color: var(--on-acc) !important;
}
html[data-theme^="t-"][data-theme$="-dark"] .digit-boxes .digit-box.filled {
  border-color: var(--acc);  /* สีตัวเลขไม่แตะ — ใช้ดำจาก style.css ทุกธีม */
}
html[data-theme^="t-"][data-theme$="-dark"] .bottom-nav {
  background: var(--cd2) !important;
  box-shadow: 0 -2px 16px rgba(0,0,0,.45);
  border-top: 1px solid rgba(255,255,255,.1);
}
html[data-theme^="t-"][data-theme$="-dark"] .bottom-nav-item { color: var(--ink2); }
html[data-theme^="t-"][data-theme$="-dark"] .bottom-nav-item.active,
html[data-theme^="t-"][data-theme$="-dark"] .bottom-nav-item:hover { color: var(--acc); }
html[data-theme^="t-"][data-theme$="-dark"] .bottom-nav-item.active::before {
  background: linear-gradient(135deg, var(--acc), var(--acc2));
}
html[data-theme^="t-"][data-theme$="-dark"] .table { --bs-table-color: var(--ink); }