/* =====================================================================
 * ธีมการแสดงผลของเครือข่าย (App\Services\NetworkThemeService) — ชุดสีจาก ui/T01-T05
 * --pt-1..3 = สีพาสเทลไล่พื้นหลัง, --pt-bg = พื้นหน้า, --dt-main = สีหลัก (ตัวอักษรขาวบนสีนี้ ≥ 5:1),
 * --dt-dark = สีตัวอักษรบนพื้นพาสเทล (≥ 4.5:1), --dt-accent = สีเน้น, --dt-on = ตัวอักษรบน accent
 * ใช้คู่กับคลาส .district-theme (ปุ่ม/การ์ด/แถบใน app.css) — โหลดเฉพาะหน้าที่เครือข่ายเลือกธีม
 * ===================================================================== */
.ptheme-p64 { --pt-1: #FFD6DA; --pt-2: #D1EAF5; --pt-3: #C3D6F2; --pt-bg: #f4f9fd; --dt-main: #4a6fa5; --dt-dark: #2c4670; --dt-accent: #FFC6D0; --dt-on: #2c4670; }  /* No.64 ฟ้าครามพาสเทล */
.ptheme-p86 { --pt-1: #F6D7C3; --pt-2: #FED7DD; --pt-3: #C8D5F6; --pt-bg: #fdf7f7; --dt-main: #5568b0; --dt-dark: #36447f; --dt-accent: #FFACBB; --dt-on: #36447f; }  /* No.86 พีชลาเวนเดอร์ */
.ptheme-p54 { --pt-1: #EADFF2; --pt-2: #FEE5EB; --pt-3: #DCCBED; --pt-bg: #faf6fc; --dt-main: #7a52a8; --dt-dark: #3f2560; --dt-accent: #F07BBB; --dt-on: #3f2560; }  /* No.54 ม่วงชมพูหวาน */
.ptheme-p12 { --pt-1: #FACBBA; --pt-2: #FFE3DF; --pt-3: #B5E8E2; --pt-bg: #f6fbfa; --dt-main: #1f7a70; --dt-dark: #3f3b3d; --dt-accent: #7ADDD1; --dt-on: #233a37; }  /* No.12 พีชมิ้นต์ */
.ptheme-p50 { --pt-1: #CDEEF3; --pt-2: #DAF1DE; --pt-3: #AEE6CB; --pt-bg: #f4fbf7; --dt-main: #27786a; --dt-dark: #1f5a4f; --dt-accent: #D6E9AA; --dt-on: #2b3a10; }  /* No.50 มิ้นต์ใบชา */

/* ---------- หน้าเว็บ (หน้าเครือข่าย) ---------- */
.ptheme { background: var(--pt-bg); }
.ptheme .page-head { background: linear-gradient(120deg, var(--pt-1), var(--pt-2) 55%, var(--pt-3)); color: var(--dt-dark); }
.ptheme .page-head .breadcrumb-item, .ptheme .page-head .breadcrumb-item a, .ptheme .page-head .breadcrumb-item.active { color: var(--dt-dark); }
.ptheme .page-head .breadcrumb-item + .breadcrumb-item::before { color: color-mix(in srgb, var(--dt-dark) 55%, transparent); }
.ptheme .section-title { color: var(--dt-dark); }
.ptheme .chip:hover { border-color: var(--dt-main); }
.ptheme .chip.active { background: var(--dt-main); border-color: var(--dt-main); color: #fff; }
.ptheme .card { box-shadow: 0 .25rem 1rem color-mix(in srgb, var(--pt-3) 45%, transparent); }
.ptheme .stat-card { background: linear-gradient(180deg, color-mix(in srgb, var(--pt-2) 45%, var(--surface)), var(--surface) 70%); }
.ptheme .progress { background: color-mix(in srgb, var(--pt-3) 45%, var(--surface)); }
.ptheme .table > thead th { background: color-mix(in srgb, var(--pt-1) 35%, var(--surface)); }
.ptheme a:not(.btn):not(.chip):not(.dropdown-item) { color: var(--dt-main); }

/* โหมดมืด: ไม่ใช้พื้นพาสเทลสว่าง ใช้เฉพาะสีหลัก/สีเน้น */
[data-bs-theme="dark"] .ptheme { background: transparent; }
[data-bs-theme="dark"] .ptheme .page-head { background: linear-gradient(135deg, var(--dt-dark), var(--dt-main)); color: #fff; }
[data-bs-theme="dark"] .ptheme .page-head .breadcrumb-item, [data-bs-theme="dark"] .ptheme .page-head .breadcrumb-item a,
[data-bs-theme="dark"] .ptheme .page-head .breadcrumb-item.active { color: rgba(255, 255, 255, .85); }
[data-bs-theme="dark"] .ptheme .section-title { color: inherit; }
[data-bs-theme="dark"] .ptheme .stat-card { background: var(--surface); }
[data-bs-theme="dark"] .ptheme .table > thead th { background: var(--surface-2); }
[data-bs-theme="dark"] .ptheme .progress { background: var(--surface-2); }
[data-bs-theme="dark"] .ptheme .card { box-shadow: none; }
[data-bs-theme="dark"] .ptheme a:not(.btn):not(.chip):not(.dropdown-item) { color: var(--dt-accent); }

/* ---------- โหมดจอทีวี (body.tv-ptheme) ---------- */
body.tv-ptheme {
  color: var(--dt-dark);
  background: radial-gradient(circle at 88% 0%, color-mix(in srgb, var(--dt-accent) 55%, transparent), transparent 45%),
              linear-gradient(160deg, var(--pt-1), var(--pt-2) 55%, var(--pt-3));
}
.tv-ptheme .tv-head { border-bottom-color: var(--dt-main); }
.tv-ptheme .tv-title h1 { color: var(--dt-dark); }
.tv-ptheme .tv-title p, .tv-ptheme .tv-progress { opacity: 1; }
.tv-ptheme .tv-bar { background: rgba(0, 0, 0, .08); }
.tv-ptheme .tv-bar div { background: linear-gradient(90deg, var(--dt-main), var(--dt-dark)); }
.tv-ptheme .tv-fs { color: var(--dt-dark); border-color: color-mix(in srgb, var(--dt-dark) 40%, transparent); }
.tv-ptheme .tv-table thead th, .tv-ptheme .tv-table th.gold, .tv-ptheme .tv-table th.silver, .tv-ptheme .tv-table th.bronze { background: var(--dt-main); color: #fff; }
.tv-ptheme .tv-table td { background: rgba(255, 255, 255, .72); }
.tv-ptheme .tv-table td.gold { color: #8a5f00; }
.tv-ptheme .tv-table td.silver { color: #4f5660; }
.tv-ptheme .tv-table td.bronze { color: #84461a; }
.tv-ptheme .rk { background: rgba(0, 0, 0, .07); }
.tv-ptheme .top1 td { background: rgba(255, 238, 180, .9); }
.tv-ptheme .tv-ticker { background: var(--dt-main); color: #fff; }

/* ---------- ตัวอย่างในหน้าตั้งค่า (หลังบ้าน) ---------- */
.theme-option { cursor: pointer; display: block; height: 100%; border: 2px solid var(--border-soft, #dee2e6); border-radius: .75rem; overflow: hidden; background: var(--surface, #fff); transition: border-color .15s, box-shadow .15s; }
.theme-option:hover { border-color: var(--bs-primary); }
.btn-check:checked + .theme-option { border-color: var(--bs-primary); box-shadow: 0 0 0 .25rem rgba(13, 110, 253, .2); }
.btn-check:focus-visible + .theme-option { outline: 2px solid var(--bs-primary); outline-offset: 2px; }
.theme-preview { padding: .9rem 1rem; background: linear-gradient(120deg, var(--pt-1), var(--pt-2) 55%, var(--pt-3)); color: var(--dt-dark); }
.theme-preview .tp-btn { display: inline-block; padding: .15rem .6rem; border-radius: .4rem; background: var(--dt-main); color: #fff; font-size: .8rem; }
.theme-preview .tp-chip { display: inline-block; padding: .1rem .55rem; border-radius: 999px; background: var(--dt-accent); color: var(--dt-on); font-size: .75rem; }
.theme-preview.tp-default { background: linear-gradient(135deg, #142356, #2a46a3); color: #fff; }
.theme-preview.tp-default .tp-btn { background: #d4a017; color: #1b1b1b; }
.theme-preview.tp-default .tp-chip { background: rgba(255, 255, 255, .2); color: #fff; }
.theme-swatches { display: flex; }
.theme-swatches span { flex: 1; height: 1.4rem; }