/* ============================================================================
   PRISM UI — "Living Board" design layer   (ร่างเสนอ · 30 ก.ค. 2569)
   ----------------------------------------------------------------------------
   เลเยอร์เสริมบน Bootstrap (ธีม zanex) + prism-*  — ไม่รื้อ markup เดิม
   เป้าหมาย: มีมิติ · มีเงา · มีความโปร่งใส · กดแล้วรู้สึกว่าหน้าจอ "มีชีวิต"
             และโหมดมืดครบทุกชิ้นส่วน (ของเดิมครอบไม่ครบ)

   หลักการ 3 ข้อ
   ① แสงมาจากบนซ้าย  → เงาคู่เสมอ (ambient นุ่มกว้าง + key คมสั้น) + เส้นไฮไลต์ 1px ด้านบน
   ② พื้นผิวเป็นชั้น   → base(พื้นหลัง) < raised(การ์ด) < floating(เมนู/โมดัล) < glass(แถบลอย)
   ③ การเคลื่อนไหวสั้น → hover 160ms · press 90ms · เข้าเฟรม 380ms  (เคารพ prefers-reduced-motion)

   ⚠️ ไฟล์นี้ยังไม่ถูกเรียกใช้ในระบบจริง — ดูตัวอย่างที่ web/prism-ui-preview.html
   ============================================================================ */

/* ── ① โทเคน: โหมดสว่าง ──────────────────────────────────────────────────── */
:root{
  --pz-accent:#0b7285;   --pz-accent-2:#0c8599;  --pz-accent-soft:#e6f3f6;
  --pz-ink:#0a2a3a;      --pz-ink-2:#33475b;     --pz-ink-3:#6b7f8f;
  --pz-base:#eef2f5;     --pz-surface:#ffffff;   --pz-surface-2:#f7fafb;
  --pz-line:#e4ebef;     --pz-line-soft:#eef3f5;

  /* เงาเป็นคู่: ambient (กว้าง จาง) + key (สั้น เข้ม) = ตาคนอ่านว่า "ลอย" ไม่ใช่ "เบลอ" */
  --pz-e1:0 1px 2px rgba(16,35,47,.05),   0 2px 8px  rgba(16,35,47,.045);
  --pz-e2:0 2px 4px rgba(16,35,47,.06),   0 8px 22px rgba(16,35,47,.075);
  --pz-e3:0 4px 8px rgba(16,35,47,.07),   0 18px 40px rgba(16,35,47,.10);
  --pz-e4:0 8px 16px rgba(16,35,47,.09),  0 34px 70px rgba(16,35,47,.14);
  --pz-glow:0 0 0 4px rgba(12,133,153,.14);          /* วงแหวนโฟกัส/แอ็กทีฟ */
  --pz-inset:inset 0 1px 0 rgba(255,255,255,.85);    /* เส้นไฮไลต์ขอบบน = ความหนา */

  --pz-glass:rgba(255,255,255,.72);
  --pz-glass-line:rgba(255,255,255,.65);
  --pz-blur:saturate(180%) blur(14px);

  --pz-r-sm:9px; --pz-r:14px; --pz-r-lg:18px; --pz-r-xl:22px;
  --pz-t-fast:.09s cubic-bezier(.4,0,.2,1);
  --pz-t:.16s cubic-bezier(.4,0,.2,1);
  --pz-t-slow:.38s cubic-bezier(.22,1,.36,1);        /* ease-out นุ่ม สำหรับเข้าเฟรม */
}

/* ── ① โทเคน: โหมดมืด (ครบชุด — ของเดิมมีแค่บางชิ้น) ───────────────────── */
html.prism-dark{
  --pz-accent:#22b8cf;   --pz-accent-2:#3bc9db;  --pz-accent-soft:#10333c;
  --pz-ink:#e8eef2;      --pz-ink-2:#c7d2da;     --pz-ink-3:#8aa0ad;
  --pz-base:#0b1116;     --pz-surface:#151f27;   --pz-surface-2:#1a252e;
  --pz-line:#25333f;     --pz-line-soft:#1e2b35;

  /* โหมดมืด: เงาดำอย่างเดียวจะ "จม" — ต้องเพิ่มเส้นสว่างขอบบนแทนแสงสะท้อน */
  --pz-e1:0 1px 2px rgba(0,0,0,.45),  0 2px 8px  rgba(0,0,0,.35);
  --pz-e2:0 2px 4px rgba(0,0,0,.5),   0 10px 24px rgba(0,0,0,.42);
  --pz-e3:0 4px 10px rgba(0,0,0,.55), 0 20px 46px rgba(0,0,0,.5);
  --pz-e4:0 10px 20px rgba(0,0,0,.6), 0 38px 80px rgba(0,0,0,.62);
  --pz-glow:0 0 0 4px rgba(34,184,207,.22);
  --pz-inset:inset 0 1px 0 rgba(255,255,255,.07);

  --pz-glass:rgba(21,31,39,.72);
  --pz-glass-line:rgba(255,255,255,.08);
}

/* ── ② พื้นหลังมีมิติ: ไล่เฉดอ่อน ๆ + แสงจากมุมบน (ไม่ใช่สีเรียบตาย) ───── */
.pz body,.pz .app-content,.pz .main-content{
  background:
    radial-gradient(1200px 520px at 12% -8%, rgba(12,133,153,.10), transparent 60%),
    radial-gradient(900px 460px at 92% 4%,  rgba(18,184,134,.075), transparent 55%),
    var(--pz-base) !important;
  color:var(--pz-ink-2);
}
html.prism-dark.pz body,html.prism-dark .pz body,
html.prism-dark .pz .app-content,html.prism-dark .pz .main-content{
  background:
    radial-gradient(1200px 520px at 12% -8%, rgba(34,184,207,.13), transparent 60%),
    radial-gradient(900px 460px at 92% 4%,  rgba(18,184,134,.08), transparent 55%),
    var(--pz-base) !important;
}

/* ── ③ การ์ด: ชั้น raised + ขอบบนไฮไลต์ + ยกตอน hover + ยุบตอนกด ───────── */
/* :not([class*="bg-"]) = ห้ามทับการ์ดที่ตั้งใจให้เป็นสีพื้น (.card.bg-primary/bg-success/text-bg-*)
   ซึ่งมีอยู่หลายร้อยจุดในระบบเดิม — ทับแล้วการ์ดสีจะกลายเป็นขาวหมด */
.pz .card:not([class*="bg-"]),.pz .kpi,.pz .pz-card{
  background:linear-gradient(180deg,var(--pz-surface),var(--pz-surface-2));
  border:1px solid var(--pz-line);
  border-radius:var(--pz-r);
  box-shadow:var(--pz-e2),var(--pz-inset);
  color:var(--pz-ink-2);
  transition:transform var(--pz-t),box-shadow var(--pz-t),border-color var(--pz-t);
  position:relative;
}
.pz .card:hover,.pz .pz-card:hover{transform:translateY(-2px);box-shadow:var(--pz-e3),var(--pz-inset)}
.pz .card:active,.pz .pz-card:active{transform:translateY(0);box-shadow:var(--pz-e1),var(--pz-inset);transition-duration:var(--pz-t-fast)}
/* ⚠️ การ์ดที่ซ้อนอยู่ในโมดัล/การ์ดอื่น ห้ามยกตัว — ไม่งั้นเนื้อหาขยับตอนเลื่อนเมาส์ผ่านเฉย ๆ */
.pz .modal .card:hover,.pz .card .card:hover,.pz .offcanvas .card:hover{transform:none;box-shadow:var(--pz-e1),var(--pz-inset)}

/* KPI: แถบสีบนเป็น "ไฟ" ไม่ใช่เส้น — เรืองแสงตาม accent ของการ์ด */
.pz .kpi{overflow:hidden;border-top:0}
.pz .kpi::before{
  content:'';position:absolute;inset:0 0 auto 0;height:3px;
  background:linear-gradient(90deg,var(--c,var(--pz-accent)),transparent 85%);
  box-shadow:0 0 14px var(--c,var(--pz-accent));opacity:.95;
}
/* วงแสงจาง ๆ หลังไอคอน — ให้การ์ดดูมีความลึก ไม่แบน */
.pz .kpi::after{
  content:'';position:absolute;right:-30px;top:-30px;width:120px;height:120px;border-radius:50%;
  background:radial-gradient(circle,var(--c,var(--pz-accent)),transparent 70%);
  opacity:.09;pointer-events:none;transition:opacity var(--pz-t),transform var(--pz-t);
}
.pz .kpi:hover::after{opacity:.16;transform:scale(1.12)}
.pz .kpi:hover{transform:translateY(-3px);box-shadow:var(--pz-e3),var(--pz-inset)}
.pz .kpi .v{font-variant-numeric:tabular-nums}
.pz .kpi .ic{
  background:linear-gradient(145deg,var(--bg,rgba(11,114,133,.16)),transparent);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.45),0 4px 10px -4px rgba(16,35,47,.4);
}

/* หัวการ์ด: โปร่งแสงซ้อนบนพื้นการ์ด + เส้นคั่นบาง */
.pz .card-header:not([class*="bg-"]),.pz .card-success>.card-header:not([class*="bg-"]),
.pz .card-header.with-border:not([class*="bg-"]){
  background:linear-gradient(180deg,rgba(255,255,255,.6),transparent) !important;
  border-bottom:1px solid var(--pz-line-soft) !important;
  border-radius:var(--pz-r) var(--pz-r) 0 0;
}
html.prism-dark .pz .card-header:not([class*="bg-"]){background:linear-gradient(180deg,rgba(255,255,255,.045),transparent) !important}

/* ⚠️ หัวการ์ด "สีทึบ" (bg-indigo/bg-red/bg-green/…) ต้องได้มุมโค้งเท่าการ์ดด้วย
   ไม่งั้นหัวสีเหลี่ยมจะโผล่พ้นมุมโค้ง 14px ของการ์ด = เห็นเป็นสามเหลี่ยมแปลก ๆ ที่มุมบน
   (เจอที่ report/dashboard/index ซึ่งมีหัวสีทึบ 19 อัน — คลาส br-tr-3/br-tl-3 ของธีมเดิมถูกลบไปแล้ว)
   + เติมไล่เฉดบาง ๆ ให้หัวสีมีมิติเข้าชุดกับการ์ดใหม่ โดยไม่เปลี่ยนสีประจำหัวข้อ */
.pz .card>.card-header:first-child,.pz .card>.card-header:first-of-type{
  border-top-left-radius:var(--pz-r);border-top-right-radius:var(--pz-r);
}
/* ⚠️ **ห้ามแตะ background-image ของหัวการ์ดสี** — คลาสสีของธีม (.bg-indigo/.bg-red/.bg-green/…)
   ให้สีผ่าน `background: linear-gradient(...)` ซึ่งก็คือ background-image ไม่ใช่ background-color
   เขียนทับเมื่อไหร่ = สีหายทั้งหมด เหลือ "ตัวหนังสือขาวบนพื้นขาว" อ่านไม่ออก
   (เกิดจริงที่ report/dashboard/index — หัวการ์ด 19 อันหายสีพร้อมกัน)
   ⇒ เติมมิติด้วย inset shadow อย่างเดียว ซึ่งไม่ไปยุ่งกับ background */
.pz .card>.card-header[class*="bg-"]{
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28),inset 0 -1px 0 rgba(0,0,0,.10);border-bottom:none;
}
.pz .card-title{color:var(--pz-ink)}

/* ── ④ Hero: ไล่เฉด 3 ชั้น + แสงเฉียง + ขอบเรืองแสง ─────────────────────── */
.pz .prism-hero,.pz .pz-hero{
  position:relative;overflow:hidden;border-radius:var(--pz-r-lg);
  background:
    radial-gradient(700px 220px at 88% -30%, rgba(255,255,255,.30), transparent 60%),
    linear-gradient(120deg,var(--pz-accent),var(--pz-accent-2) 55%,#12b886 140%);
  box-shadow:0 12px 30px -10px rgba(11,114,133,.55),var(--pz-inset);
  color:#fff;
}
/* แถบแสงวิ่งช้า ๆ — "บอร์ดมีชีวิต" แต่ไม่รบกวนสายตา (12 วิ/รอบ) */
.pz .prism-hero::after,.pz .pz-hero::after{
  content:'';position:absolute;top:-60%;left:-40%;width:45%;height:220%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.16),transparent);
  transform:rotate(18deg);animation:pzSheen 12s ease-in-out infinite;pointer-events:none;
}
@keyframes pzSheen{0%,72%{left:-45%}100%{left:130%}}

/* ── ⑤ ปุ่ม: นูน → กดยุบ + ระลอกคลื่น (ripple ฉีดโดย prism-ui.js) ───────── */
.pz .btn{
  border-radius:var(--pz-r-sm);position:relative;overflow:hidden;
  transition:transform var(--pz-t-fast),box-shadow var(--pz-t),filter var(--pz-t);
}
.pz .btn-primary,.pz .btn-success,.pz .btn-danger,.pz .btn-warning,.pz .btn-info,.pz .btn-dark{
  box-shadow:var(--pz-e1),inset 0 1px 0 rgba(255,255,255,.28);
  background-image:linear-gradient(180deg,rgba(255,255,255,.14),transparent);
}
.pz .btn:hover{box-shadow:var(--pz-e2)}
.pz .btn:active{transform:translateY(1px) scale(.985);box-shadow:inset 0 2px 6px rgba(0,0,0,.18)}
.pz .btn:focus-visible{outline:none;box-shadow:var(--pz-glow),var(--pz-e1)}
.pz .pz-ripple{position:absolute;border-radius:50%;transform:scale(0);opacity:.42;
  background:currentColor;pointer-events:none;animation:pzRipple .52s ease-out forwards}
@keyframes pzRipple{to{transform:scale(2.6);opacity:0}}

/* ชิปช่วงเวลา: แอ็กทีฟแล้วต้อง "ติดไฟ" ชัด (ของเดิมกดแล้วดูไม่แอ็กทีฟในโหมดมืด) */
.pz .mm-preset,.pz .pz-chip{
  border:1px solid var(--pz-line);background:var(--pz-surface);color:var(--pz-ink-2);
  border-radius:20px;padding:5px 15px;font-weight:600;font-size:13px;cursor:pointer;
  transition:all var(--pz-t);box-shadow:var(--pz-e1);text-decoration:none;display:inline-block;line-height:1.4;
}
.pz .mm-preset:hover,.pz .pz-chip:hover{border-color:var(--pz-accent);color:var(--pz-accent);transform:translateY(-1px);box-shadow:var(--pz-e2)}
.pz .mm-preset.on,.pz .pz-chip.on{
  background:linear-gradient(135deg,var(--pz-accent),var(--pz-accent-2)) !important;
  color:#fff !important;border-color:transparent !important;
  box-shadow:0 6px 16px -6px var(--pz-accent),var(--pz-glow) !important;
}

/* ── ⑥ ตาราง: หัวตารางลอย (sticky+glass) + แถวไฮไลต์แบบไล่เฉด ──────────── */
.pz .grid-view,.pz .pz-table-wrap{border:1px solid var(--pz-line);border-radius:var(--pz-r);overflow:hidden;box-shadow:var(--pz-e1)}
.pz table.table{color:var(--pz-ink-2);margin-bottom:0}
.pz table.table thead th{
  background:linear-gradient(180deg,var(--pz-accent),var(--pz-accent-2)) !important;color:#fff !important;
  border:none !important;box-shadow:0 2px 10px -4px rgba(0,0,0,.5);
}
/* หัวตาราง "ปักบนสุด" = **ต้องขอเอง** ด้วย .pz-table-wrap เท่านั้น
   ⚠️ เคยจะใส่ให้ .table-responsive ทุกอัน แล้วพบว่า 68 หน้าทำ sticky ของตัวเองไว้อยู่แล้ว
      (บางหน้าตั้ง top offset เผื่อแถบเครื่องมือ) — ทับแล้วหัวตารางจะไปซ้อนกับแถบของหน้านั้น */
.pz .pz-table-wrap table.table thead th{position:sticky;top:0;z-index:2}
.pz table.table tbody tr{transition:background var(--pz-t-fast),box-shadow var(--pz-t-fast)}
.pz table.table tbody tr:hover>td{
  background:linear-gradient(90deg,var(--pz-accent-soft),transparent) !important;
  box-shadow:inset 3px 0 0 var(--pz-accent);
}
.pz table.table td,.pz table.table th{border-color:var(--pz-line-soft) !important}

/* ── ⑦ ชั้นลอย: dropdown / modal / popover / tooltip = แก้ว ──────────────── */
.pz .dropdown-menu,.pz .modal-content,.pz .offcanvas,.pz .popover,.pz .pz-float{
  background:var(--pz-glass);backdrop-filter:var(--pz-blur);-webkit-backdrop-filter:var(--pz-blur);
  border:1px solid var(--pz-glass-line);border-radius:var(--pz-r-lg);
  box-shadow:var(--pz-e4);color:var(--pz-ink-2);
}
.pz .modal-header,.pz .modal-footer,.pz .offcanvas-header{border-color:var(--pz-line-soft)}
.pz .dropdown-item{border-radius:var(--pz-r-sm);color:var(--pz-ink-2);transition:background var(--pz-t-fast)}
.pz .dropdown-item:hover,.pz .dropdown-item:focus{background:var(--pz-accent-soft);color:var(--pz-accent)}
.pz .tooltip-inner{background:rgba(10,42,58,.92);backdrop-filter:blur(6px);border-radius:var(--pz-r-sm);box-shadow:var(--pz-e3)}
.pz .modal-backdrop.show{opacity:.55;backdrop-filter:blur(3px)}

/* แถบเครื่องมือ/หัวข้อที่ปักบนสุด — โปร่งแสงเห็นเนื้อหาไหลผ่านข้างหลัง */
.pz .pz-sticky{
  position:sticky;top:0;z-index:5;background:var(--pz-glass);
  backdrop-filter:var(--pz-blur);-webkit-backdrop-filter:var(--pz-blur);
  border-bottom:1px solid var(--pz-glass-line);box-shadow:var(--pz-e1);
}

/* ── ⑧ โหมดมืด: ปิดช่องที่ของเดิมยังไม่ครอบ ────────────────────────────── */
html.prism-dark .pz .nav-tabs{border-color:var(--pz-line)}
html.prism-dark .pz .nav-tabs .nav-link{color:var(--pz-ink-3);border-color:transparent}
html.prism-dark .pz .nav-tabs .nav-link:hover{border-color:var(--pz-line);background:var(--pz-surface-2)}
html.prism-dark .pz .nav-tabs .nav-link.active{background:var(--pz-surface);color:var(--pz-accent);border-color:var(--pz-line) var(--pz-line) var(--pz-surface)}
html.prism-dark .pz .nav-pills .nav-link.active,.pz .nav-pills .nav-link.active{background:linear-gradient(135deg,var(--pz-accent),var(--pz-accent-2));box-shadow:0 6px 16px -6px var(--pz-accent)}
html.prism-dark .pz .list-group-item{background:var(--pz-surface);border-color:var(--pz-line);color:var(--pz-ink-2)}
html.prism-dark .pz .accordion-item,html.prism-dark .pz .accordion-button{background:var(--pz-surface);color:var(--pz-ink-2);border-color:var(--pz-line)}
html.prism-dark .pz .accordion-button:not(.collapsed){background:var(--pz-surface-2);color:var(--pz-accent)}
html.prism-dark .pz .accordion-button::after{filter:invert(1) brightness(1.6)}
html.prism-dark .pz .btn-close{filter:invert(1) grayscale(1) brightness(1.8)}
html.prism-dark .pz .page-link{background:var(--pz-surface);border-color:var(--pz-line);color:var(--pz-accent)}
html.prism-dark .pz .page-item.active .page-link{background:linear-gradient(135deg,var(--pz-accent),var(--pz-accent-2));border-color:transparent;color:#06222a}
html.prism-dark .pz .progress{background:var(--pz-surface-2)}
html.prism-dark .pz .input-group-text{background:var(--pz-surface-2);border-color:var(--pz-line);color:var(--pz-ink-3)}
html.prism-dark .pz .breadcrumb,html.prism-dark .pz .breadcrumb-item,html.prism-dark .pz .breadcrumb-item a{color:var(--pz-ink-3)}
html.prism-dark .pz hr{border-color:var(--pz-line);opacity:1}
html.prism-dark .pz code,html.prism-dark .pz kbd{background:var(--pz-surface-2);color:#7ee0e8;border:1px solid var(--pz-line)}
html.prism-dark .pz pre{background:#0e1820;color:var(--pz-ink-2);border:1px solid var(--pz-line);border-radius:var(--pz-r-sm)}
html.prism-dark .pz .table-striped>tbody>tr:nth-of-type(odd)>*{background:rgba(255,255,255,.022);color:var(--pz-ink-2)}
html.prism-dark .pz .bg-white,html.prism-dark .pz .bg-light{background:var(--pz-surface) !important;color:var(--pz-ink-2) !important}
html.prism-dark .pz .text-dark{color:var(--pz-ink) !important}
html.prism-dark .pz .border,html.prism-dark .pz .border-top,html.prism-dark .pz .border-bottom,
html.prism-dark .pz .border-start,html.prism-dark .pz .border-end{border-color:var(--pz-line) !important}
html.prism-dark .pz .toast,html.prism-dark .pz .alert{background:var(--pz-surface);border-color:var(--pz-line);color:var(--pz-ink-2)}
/* ป้ายสีอ่อนในโหมดมืด: พื้นจาง+ตัวอักษรสีเดียวกัน = อ่านออกทั้งสองโหมด */
html.prism-dark .pz .badge.bg-light,html.prism-dark .pz .badge.text-bg-light{background:var(--pz-surface-2) !important;color:var(--pz-ink-2) !important}
html.prism-dark .pz .form-check-input:not(:checked){background-color:var(--pz-surface-2);border-color:var(--pz-line)}
html.prism-dark .pz ::placeholder{color:var(--pz-ink-3) !important}
html.prism-dark .pz .btn-light,html.prism-dark .pz .btn-outline-secondary{background:var(--pz-surface-2);border-color:var(--pz-line);color:var(--pz-ink-2)}

/* ── ⑧½ แถบหัว: ปุ่มไอคอนของธีมเป็นวงกลม "ขาวล้วน" — บนพื้นเข้มจะแสบตาและดูหลุด ── */
/* ปุ่มสลับโหมดอยู่ในกลุ่มไอคอนของธีมแล้ว (ใช้คลาส .nav-link.icon ร่วมกัน)
   ที่นี่แค่จัด emoji ให้อยู่กึ่งกลางวงเท่าไอคอนฟอนต์ตัวอื่น — ห้ามตั้ง width/height/background เอง
   ไม่งั้นจะหลุดจากทรงของกลุ่ม (ผู้ใช้แจ้งว่า "ปุ่มดูไม่เข้าพวก" 30 ก.ค. 69) */
.pz .pz-dark-btn{
  font-size:17px;line-height:1;display:flex;align-items:center;justify-content:center;
  text-decoration:none;transition:transform var(--pz-t);
}
.pz .pz-dark-btn:hover{transform:rotate(-12deg) scale(1.06)}
html.prism-dark .pz .main-header .nav-link.icon,html.prism-dark .pz .header-right-icons .nav-link{
  background:var(--pz-surface-2) !important;color:var(--pz-ink-2) !important;border-color:var(--pz-line) !important;
}
html.prism-dark .pz .main-header .nav-link.icon i,html.prism-dark .pz .header-right-icons .nav-link i{color:var(--pz-ink-2) !important}
/* ธีม zanex มีสวิตช์สลับโหมดของตัวเอง (.theme-layout.layout-setting) ซึ่ง "ไม่ใช่" prism-dark
   ⇒ มีสวิตช์ 2 ตัวทำคนละอย่างอยู่ข้างกัน ผู้ใช้กดผิดตัวแน่นอน → ซ่อนของธีมไว้ เหลือ 🌙 ตัวเดียว */
.pz .theme-layout.layout-setting{display:none !important}   /* อยู่ใน .responsive-navbar ไม่ใช่ .main-header */

/* ── ⑧¾ แถบเมนูซ้าย: โหมดมืดแล้วยังขาวทั้งแถบ (ผู้ใช้แจ้ง 30 ก.ค. 69) ──
   ของเดิมทำสีให้เฉพาะ "ตัวหนังสือ" ใน .side-menu__item เท่านั้น ไม่เคยแตะพื้นแถบ
   ⇒ เปิดโหมดมืดแล้วได้แถบขาวสว่างพาดข้างจอดำ + ตัวหนังสือสีเข้มบนพื้นขาว (ยังพออ่านได้เลยไม่มีใครแจ้ง)
   ครอบทุกชั้นที่ธีม zanex ใช้: ตัวแถบ · หัวแถบ (โลโก้) · กล่องเมนู · เมนูย่อย · ตัวคั่นหมวด */
html.prism-dark .pz .app-sidebar,
html.prism-dark .pz .sidebar,
html.prism-dark .pz .side-header,
html.prism-dark .pz .app-sidebar__logo,
html.prism-dark .pz .main-sidemenu,
html.prism-dark .pz .first-sidemenu,
html.prism-dark .pz .second-sidemenu,
html.prism-dark .pz .app-sidebar__user,
html.prism-dark .pz .side-menu{
  background:var(--pz-surface) !important;
  border-color:var(--pz-line) !important;
  box-shadow:1px 0 0 var(--pz-line);
}
html.prism-dark .pz .side-header{border-bottom-color:var(--pz-line) !important}
html.prism-dark .pz .side-menu__item,
html.prism-dark .pz .side-menu__label,
html.prism-dark .pz .side-menu__icon,
html.prism-dark .pz .slide-item,
html.prism-dark .pz .slide-menu a{color:var(--pz-ink-2) !important}
html.prism-dark .pz .sub-category h3,
html.prism-dark .pz .side-menu .sub-category{color:var(--pz-ink-3) !important}
/* แอ็กทีฟ/ชี้เมาส์ — ใช้สีเน้นของธีมแทนพื้นเทาอ่อนที่มองไม่เห็นบนพื้นเข้ม */
html.prism-dark .pz .side-menu__item:hover,
html.prism-dark .pz .slide-item:hover{background:var(--pz-surface-2) !important;color:var(--pz-accent) !important}
html.prism-dark .pz .side-menu__item.active,
html.prism-dark .pz .slide.is-expanded>.side-menu__item{
  background:linear-gradient(90deg,rgba(34,184,207,.16),transparent) !important;
  color:var(--pz-accent) !important;box-shadow:inset 3px 0 0 var(--pz-accent);
}
html.prism-dark .pz .slide-menu{background:var(--pz-surface-2) !important}
html.prism-dark .pz .app-sidebar hr,html.prism-dark .pz .app-sidebar .dropdown-divider{border-color:var(--pz-line) !important}

/* ── ⑧⅞ แถบหัวบนสุด: โหมดมืดแล้วยังขาวทั้งแถบ (ผู้ใช้แจ้ง 30 ก.ค. 69 รอบสอง) ──
   วัดจากหน้าจริงหลังล็อกอิน: .app-header = rgb(255,255,255) · ครอบตัวแถบ + ทุกอย่างที่ห้อยจากแถบ
   (เมนูผู้ใช้ · การแจ้งเตือน · ข้อความ · ช่องค้นหาบนมือถือ · แผงตั้งค่าด้านขวา) */
html.prism-dark .pz .app-header,
html.prism-dark .pz .main-header,
html.prism-dark .pz .header.sticky,
html.prism-dark .pz .hor-header,
html.prism-dark .pz .horizontal-main{
  background:var(--pz-surface) !important;
  border-bottom-color:var(--pz-line) !important;
  box-shadow:0 1px 0 var(--pz-line),var(--pz-e1);
}
/* ⚠️ ห้ามทาพื้น/เงาให้ .responsive-navbar และ .navbar-collapse บนจอใหญ่ —
   สองตัวนี้เป็นแค่ "กล่องห่อกลุ่มไอคอน" ไม่ใช่แถบ ทาแล้วจะเห็นเป็น **สี่เหลี่ยมลอย**
   ซ้อนอยู่หลังปุ่ม (ผู้ใช้แจ้ง 30 ก.ค. 69) · ให้พื้นเฉพาะตอนกางเมนูบนมือถือเท่านั้น */
html.prism-dark .pz .responsive-navbar,
html.prism-dark .pz .navbar-collapse{background:transparent !important;box-shadow:none !important;border:none !important}
html.prism-dark .pz .navbar-collapse.show,
html.prism-dark .pz .navbar-collapse.collapsing{
  background:var(--pz-surface) !important;box-shadow:var(--pz-e3) !important;border-radius:0 0 var(--pz-r) var(--pz-r);
}
/* ปุ่มในแถบหัวให้เป็น "วงกลมแยกกันชัด ๆ" ไม่ใช่แถบไอคอนติดกัน */
.pz .header-right-icons .nav-link.icon,.pz .header-right-icons .nav-link.leading-none{
  border-radius:50% !important;margin-left:7px;border:none !important;
}
.pz .header-right-icons .dropdown{border:none !important;background:transparent !important}
html.prism-dark .pz .app-header .header-brand-img,
html.prism-dark .pz .app-header .mobile-logo{filter:brightness(1.08)}
/* ปุ่มเมนูสามขีดบนมือถือใช้คลาส .text-dark = ดำบนพื้นดำ มองไม่เห็น */
html.prism-dark .pz .navbar-toggler .navbar-toggler-icon,
html.prism-dark .pz .navbar-toggler-icon.text-dark{color:var(--pz-ink-2) !important}
html.prism-dark .pz .navbar-toggler{border-color:var(--pz-line) !important}
/* กล่องที่ห้อยจากแถบหัว */
html.prism-dark .pz .drop-heading,
html.prism-dark .pz .header-search,
html.prism-dark .pz .notifications-menu,
html.prism-dark .pz .message-menu,
html.prism-dark .pz .sidebar-right{background:var(--pz-surface) !important;color:var(--pz-ink-2) !important}
html.prism-dark .pz .drop-heading{border-bottom-color:var(--pz-line) !important}
html.prism-dark .pz .drop-heading h5,html.prism-dark .pz .drop-heading h6,
html.prism-dark .pz .notification-label,html.prism-dark .pz .message-menu h5{color:var(--pz-ink) !important}
html.prism-dark .pz .notification-subtext,html.prism-dark .pz .message-menu span{color:var(--pz-ink-3) !important}
html.prism-dark .pz .dropdown-divider{border-color:var(--pz-line) !important}
/* ท้ายหน้า + ปุ่มพับเมนูซ้าย (สองจุดสุดท้ายที่ยังขาวอยู่) */
html.prism-dark .pz .footer,
html.prism-dark .pz .main-footer{background:var(--pz-surface) !important;border-top:1px solid var(--pz-line) !important;color:var(--pz-ink-3) !important}
html.prism-dark .pz .footer a,html.prism-dark .pz .footer b{color:var(--pz-accent) !important}
html.prism-dark .pz .app-sidebar__toggle{background:transparent !important;color:var(--pz-ink-2) !important}
html.prism-dark .pz .app-sidebar__toggle:hover{background:var(--pz-surface-2) !important;color:var(--pz-accent) !important}

/* ── ⑧⅚ การ์ดสี (สรุปรายปีงบประมาณ ฯลฯ) — โหมดมืดเดิมกลืนเป็นเทาหมด ──
   สาเหตุ: กฎ dark เดิมใน layout เขียน `html.prism-dark .card{background:#16212b!important}`
   แบบไม่ยกเว้นการ์ดสี ⇒ การ์ด bg-primary/secondary/info/success/danger กลายเป็นเทาเหมือนกันหมด
   ⇒ คืนสีให้ แต่ใช้เฉดที่ "ลึกกว่าโหมดสว่าง" + เรืองแสงรอบการ์ด เพื่อไม่แสบตาบนพื้นดำ
   (ผู้ใช้สั่งเพิ่มสีสันตรง "📅 สรุปรายปีงบประมาณ" 30 ก.ค. 69) */
html.prism-dark .pz .card.bg-primary{background:linear-gradient(135deg,#4b43a8,#6f63d6) !important;box-shadow:0 10px 26px -12px rgba(111,99,214,.75),var(--pz-inset) !important}
html.prism-dark .pz .card.bg-secondary{background:linear-gradient(135deg,#c9530a,#f2802a) !important;box-shadow:0 10px 26px -12px rgba(242,128,42,.7),var(--pz-inset) !important}
html.prism-dark .pz .card.bg-success{background:linear-gradient(135deg,#0a8a63,#12a883) !important;box-shadow:0 10px 26px -12px rgba(18,168,131,.7),var(--pz-inset) !important}
html.prism-dark .pz .card.bg-info{background:linear-gradient(135deg,#1866ad,#1189a8) !important;box-shadow:0 10px 26px -12px rgba(17,137,168,.7),var(--pz-inset) !important}
html.prism-dark .pz .card.bg-danger{background:linear-gradient(135deg,#bf2b3e,#d4568a) !important;box-shadow:0 10px 26px -12px rgba(212,86,138,.7),var(--pz-inset) !important}
html.prism-dark .pz .card[class*="bg-"] .card-body,
html.prism-dark .pz .card[class*="bg-"] h1,html.prism-dark .pz .card[class*="bg-"] h2,
html.prism-dark .pz .card[class*="bg-"] h3,html.prism-dark .pz .card[class*="bg-"] h4,
html.prism-dark .pz .card[class*="bg-"] .number-font,
html.prism-dark .pz .card[class*="bg-"] p,html.prism-dark .pz .card[class*="bg-"] span{color:#fff !important}
html.prism-dark .pz .card[class*="bg-"] .text-muted{color:rgba(255,255,255,.78) !important}
html.prism-dark .pz .card[class*="bg-"]:hover{transform:translateY(-3px)}

/* ── ⑨ สถานะ "แอ็กทีฟ" ที่มองเห็นชัดทุกโหมด (ของเดิมกดแล้วไม่รู้ว่าติด) ── */
.pz [aria-current],.pz .active>.page-link,.pz .pz-on{position:relative}
.pz .side-menu__item.active,.pz .nav-link.active,.pz .pz-on{box-shadow:var(--pz-glow)}
.pz .pz-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:#12b886;
  box-shadow:0 0 0 0 rgba(18,184,134,.6);animation:pzPulse 2s infinite}
@keyframes pzPulse{70%{box-shadow:0 0 0 8px rgba(18,184,134,0)}100%{box-shadow:0 0 0 0 rgba(18,184,134,0)}}

/* ── ⑩ เข้าเฟรมแบบไล่ทีละใบ (JS ใส่ --i ให้) ────────────────────────────── */
.pz .pz-in{opacity:0;transform:translateY(14px) scale(.985);
  animation:pzIn var(--pz-t-slow) forwards;animation-delay:calc(var(--i,0)*60ms)}
@keyframes pzIn{to{opacity:1;transform:none}}

/* ── ⑪ เลเยอร์หน่วงเวลาตอนกด (ให้รู้ว่าระบบรับคำสั่งแล้ว กำลังไปต่อ) ───── */
.pz .pz-busy{position:relative;pointer-events:none}
.pz .pz-busy::after{
  content:'';position:absolute;inset:0;border-radius:inherit;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.45),transparent);
  background-size:220% 100%;animation:pzShimmer 1.1s linear infinite;
}
html.prism-dark .pz .pz-busy::after{background:linear-gradient(90deg,transparent,rgba(255,255,255,.13),transparent);background-size:220% 100%}
@keyframes pzShimmer{from{background-position:120% 0}to{background-position:-120% 0}}
/* แถบความคืบหน้าบนสุดของจอ — โผล่เมื่อกดแล้วกำลังโหลดหน้าใหม่ */
#pzBar{position:fixed;top:0;left:0;height:3px;width:0;z-index:2000;border-radius:0 3px 3px 0;
  background:linear-gradient(90deg,var(--pz-accent),#12b886);box-shadow:0 0 12px var(--pz-accent);
  transition:width .25s ease,opacity .3s}
/* โครงร่างระหว่างรอข้อมูล (skeleton) — ใช้แทนหน้าขาว */
.pz .pz-skel{background:linear-gradient(90deg,var(--pz-line-soft),var(--pz-surface-2),var(--pz-line-soft));
  background-size:200% 100%;animation:pzShimmer 1.3s linear infinite;border-radius:8px;color:transparent}

/* ── ⑫ กราฟ: กรอบโปร่ง + เงาใต้กราฟ (เงาเส้น/แท่งทำใน prism-ui.js) ─────── */
.pz .pz-chart{
  position:relative;border-radius:var(--pz-r);padding:10px 12px 4px;
  background:linear-gradient(180deg,rgba(255,255,255,.5),transparent 70%);
  border:1px solid var(--pz-line-soft);box-shadow:var(--pz-inset);
}
html.prism-dark .pz .pz-chart{background:linear-gradient(180deg,rgba(255,255,255,.04),transparent 70%)}
/* ⚠️ ห้ามยิง filter ใส่ `.card-body canvas` แบบเหมารวม — canvas ในเนื้อการ์ดมีทั้งกราฟและ
   แผนที่ (Google Maps/heatmap ฉีด canvas เอง) การใส่ drop-shadow ให้แผนที่ = เบลอ + กินการ์ดจอ
   ⇒ เงาของกราฟทำที่ JS แทน: prism-ui.js ติดให้เฉพาะ canvas ที่ Chart.getChart() รู้จักจริง */
.pz .pz-chart canvas{filter:drop-shadow(0 10px 18px rgba(16,35,47,.16))}
html.prism-dark .pz .pz-chart canvas{filter:drop-shadow(0 10px 20px rgba(0,0,0,.55))}
.pz canvas[data-nopz]{filter:none !important}

/* Highcharts (หน้ารายงานเก่า 41 ไฟล์) — พื้นโปร่งใสให้เห็นการ์ดข้างหลัง + ตัวอักษรตามโหมด
   ⚠️ พื้นกราฟของ Highcharts คือ <rect class="highcharts-background" fill="#ffffff"> = **SVG fill**
      สั่ง background:transparent ไม่มีผลเลย (วัดจริงที่ report/dashboard/index — 19 กราฟยังเป็นกล่องขาว
      บนการ์ดมืด) ต้องสั่ง fill ตรง ๆ · ตัวหนังสือใช้ fill เหมือนกัน แต่ !important ชนะ inline style ได้ */
.pz .highcharts-container{background:transparent !important}
.pz .highcharts-background{fill:transparent !important}
html.prism-dark .pz .highcharts-title,html.prism-dark .pz .highcharts-subtitle,
html.prism-dark .pz .highcharts-axis-labels text,html.prism-dark .pz .highcharts-data-labels text,
html.prism-dark .pz .highcharts-legend-item text,html.prism-dark .pz .highcharts-axis-title{fill:var(--pz-ink-2) !important;color:var(--pz-ink-2) !important}
html.prism-dark .pz .highcharts-grid-line{stroke:rgba(255,255,255,.07)}
html.prism-dark .pz .highcharts-axis-line,html.prism-dark .pz .highcharts-tick{stroke:rgba(255,255,255,.14)}

/* ApexCharts (dashboard 3 ไฟล์) */
.pz .apexcharts-canvas{background:transparent !important}
html.prism-dark .pz .apexcharts-text,html.prism-dark .pz .apexcharts-legend-text{fill:var(--pz-ink-2) !important;color:var(--pz-ink-2) !important}
html.prism-dark .pz .apexcharts-gridline{stroke:rgba(255,255,255,.07)}
html.prism-dark .pz .apexcharts-tooltip{background:var(--pz-surface) !important;border-color:var(--pz-line) !important;color:var(--pz-ink-2) !important;box-shadow:var(--pz-e3) !important}
html.prism-dark .pz .apexcharts-tooltip-title{background:var(--pz-surface-2) !important;border-color:var(--pz-line) !important}
/* ตัวเลขสรุปมุมกราฟ — ลอยบนกราฟแบบกระจก */
.pz .pz-chart .pz-chart-badge{
  position:absolute;right:12px;top:10px;background:var(--pz-glass);backdrop-filter:var(--pz-blur);
  border:1px solid var(--pz-glass-line);border-radius:999px;padding:3px 11px;font-size:12.5px;
  font-weight:700;color:var(--pz-ink-2);box-shadow:var(--pz-e1);
}

/* ── ⑬ เคารพผู้ใช้ที่ปิดแอนิเมชัน + จอเล็ก ─────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  .pz *,.pz *::before,.pz *::after{animation:none !important;transition:none !important}
  .pz .pz-in{opacity:1;transform:none}
}
/* พิมพ์เอกสาร: เงา/แสงกวาด/ฟิลเตอร์ ทำให้หมึกเลอะและกราฟเบลอ — ตัดทิ้งทั้งหมดตอนพิมพ์
   (มี 5 หน้าที่มี @media print เอง + 4 หน้าที่เรียก window.print() เช่น ใบตรวจเวชระเบียน) */
@media print{
  .pz *,.pz *::before,.pz *::after{box-shadow:none !important;text-shadow:none !important;
    animation:none !important;transition:none !important;filter:none !important;backdrop-filter:none !important}
  .pz .prism-hero::after,.pz .pz-hero::after,#pzBar{display:none !important}
  .pz .card,.pz .kpi{background:#fff !important;border:1px solid #ccc !important}
  .pz canvas{filter:none !important}
}

@media (max-width:576px){
  .pz .card,.pz .kpi{border-radius:var(--pz-r-sm)}
  .pz .prism-hero::after,.pz .pz-hero::after{display:none}   /* มือถือ: ตัดแสงวิ่ง ประหยัดแบต */
}

/* ── หัวข้อคั่นในเมนูข้าง (ไม่ใช่ลิงก์) — ใช้แยก "งานย่อย" ออกจากรายการหลักของกลุ่ม
   ผู้ใช้ทัก 4 ส.ค. 69: ของเดิมเป็นลิงก์กดได้แต่ไม่พาไปไหน (report/napha/#) */
.pz .side-menu__sep, .side-menu__sep {
    list-style: none;
    padding: 10px 18px 4px;
    margin: 4px 0 0;
    pointer-events: none;          /* กดไม่ได้ — เป็นหัวข้อ ไม่ใช่ปุ่ม */
}
.pz .side-menu__sep > span, .side-menu__sep > span {
    display: block;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .04em;
    color: var(--pz-ink-2, #8a97a8);
    text-transform: none;
    border-top: 1px solid var(--pz-line, rgba(140, 155, 175, .28));
    padding-top: 8px;
}