/* 

.layout-header::after {
	content: "";
	background: var(--color-gradient);
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 10px;
	transition: var(--transition);
} */

/* .tabmenu-left {
	background-image: linear-gradient(to bottom, #019AD0, #00BECE) !important;
}

.tabmenu-left li {
	background-color: transparent !important;
	transition: 0.3s;
}

.tabmenu-left li:hover {
	background-color: rgba(255, 255, 255, 0.2) !important;
	transition: 0.5s;
}

.tabmenu-left li:active {
	background-color: rgba(255, 255, 255, 0.3) !important;
	transition: 0.1s;
} */


/* ===============================
   TABMENU LEFT – PREMIUM BLUE
   =============================== */

/* ===============================
   TABMENU LEFT – DARK PREMIUM
   =============================== */
:root{
  --ms-bg1:#020617;     /* navy black */
  --ms-bg2:#031633;     /* deep navy */
  --ms-line:rgba(255,255,255,.08);
  --ms-text:#e5f3ff;
  --ms-muted:rgba(229,243,255,.75);
  --ms-accent:#38bdf8;  /* cyan */
  --ms-accent2:#2563eb; /* blue */
  --ms-card:rgba(255,255,255,.06);

    --ui-bg1:#020617;         /* navy black */
  --ui-bg2:#031633;         /* deep navy */
  --ui-line:rgba(255,255,255,.10);
  --ui-text:#e5f3ff;
  --ui-muted:rgba(229,243,255,.75);

  --ui-accent:#38bdf8;      /* cyan neon */
  --ui-accent2:#2563eb;     /* blue */
  --ui-glow:rgba(56,189,248,.35);
  --ui-glow2:rgba(37,99,235,.28);
}

/* พื้นหลังหลัก (เข้ม) */
.tabmenu-left{
  background: linear-gradient(
    180deg,
    #020617 0%,
    #020b1f 45%,
    #031633 100%
  ) !important;

  box-shadow:
    inset -1px 0 0 rgba(255,255,255,.06),
    0 0 26px rgba(56,189,248,.35) !important;
}

/* item */
.tabmenu-left li{
  background: transparent !important;
  color: #cfe9ff !important;

  position: relative;
  transition: all .35s ease !important;
}

/* เส้นเรืองแสงด้านซ้าย */
.tabmenu-left li::before{
  content: '';
  position: absolute;
  left: 0;
  top: 8px;
  bottom: 8px;
  width: 3px;
  background: linear-gradient(
    to bottom,
    transparent,
    #38bdf8,
    transparent
  );
  opacity: 0;
  transition: .35s;
}

/* hover */
.tabmenu-left li:hover{
  background: linear-gradient(
    90deg,
    rgba(255,255,255,.12),
    rgba(255,255,255,.02)
  ) !important;

  box-shadow:
    inset 4px 0 0 rgba(56,189,248,.55),
    inset 0 0 0 1px rgba(255,255,255,.06);
}

/* hover glow */
.tabmenu-left li:hover::before{
  opacity: 1;
}

/* ===============================
   ACTIVE (เข้มสุด)
   =============================== */
.tabmenu-left li.active{
  background: linear-gradient(
    90deg,
    #020617,
    #020b1f
  ) !important;

  color: #ffffff !important;
  font-weight: 600;

  box-shadow:
    inset 5px 0 0 #38bdf8,
    inset 0 0 0 1px rgba(56,189,248,.25),
    0 0 20px rgba(56,189,248,.55);

  text-shadow:
    0 0 6px rgba(255,255,255,.4),
    0 0 14px rgba(56,189,248,.6);
}

/* active + hover */
.tabmenu-left li.active:hover{
  background: linear-gradient(
    90deg,
    #020b1f,
    #031633
  ) !important;
}

/* ปิดเอฟเฟกต์ hover อื่นไม่ให้ทับ active */
.tabmenu-left li.active::before,
.tabmenu-left li.active::after{
  opacity: 0 !important;
}

/* เอฟเฟกต์แสงวิ่ง (เฉพาะ hover) */
.tabmenu-left li::after{
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    120deg,
    transparent,
    rgba(255,255,255,.18),
    transparent
  );
  opacity: 0;
  transition: .3s;
}

.tabmenu-left li:hover::after{
  opacity: 1;
}

/* ===============================
   HOVER FOLLOW MOUSE EFFECT
   =============================== */

.tabmenu-left li{
  overflow: hidden; /* สำคัญ */
}

/* layer แสง */
.tabmenu-left li::after{
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;

  background:
    radial-gradient(
      120px circle at var(--x, 50%) var(--y, 50%),
      rgba(56,189,248,.35),
      rgba(56,189,248,.15) 35%,
      transparent 60%
    );

  opacity: 0;
  transition: opacity .25s ease;
}

/* เปิดแสงตอน hover */
.tabmenu-left li:hover::after{
  opacity: 1;
}

/* ปิดเอฟเฟกต์สำหรับ active (กันรก) */
.tabmenu-left li.active::after{
  display: none;
}

.tabmenu-left li::after{
  background:
   radial-gradient(
  80px circle at var(--x, 50%) var(--y, 50%),
  rgba(125,211,252,.45),
  transparent 60%
);
  transform: translateX(var(--x, 0));
}
/* select2 style */
/* ===============================
   SELECT2 – BLUE NEON THEME
   =============================== */

/* ===============================
   SELECT2 – SINGLE & MULTIPLE
   =============================== */
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple{
  min-height: 42px !important;
  border-radius: 12px !important;
  border: 1px solid var(--ui-line) !important;

  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.04)) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);

  box-shadow:
    0 10px 18px rgba(0,0,0,.20),
    inset 0 1px 0 rgba(255,255,255,.06) !important;

  transition: transform .2s ease, box-shadow .25s ease, border-color .25s ease, background .25s ease !important;
  font-size: 15px !important;
  color: var(--ui-text) !important;

  position: relative;
  overflow: hidden;
}

/* subtle glass highlight */
.select2-container--default .select2-selection--single::after,
.select2-container--default .select2-selection--multiple::after{
  content:'';
  position:absolute;
  inset:-40% -40%;
  background: linear-gradient(120deg, transparent 35%, rgba(255,255,255,.18), transparent 65%);
  transform: translateX(-35%);
  opacity: .45;
  transition: transform .45s ease, opacity .35s ease;
  pointer-events:none;
}

.select2-container--default .select2-selection--single:hover::after,
.select2-container--default .select2-selection--multiple:hover::after{
  transform: translateX(35%);
  opacity: .80;
}

/* hover */
.select2-container--default .select2-selection--single:hover,
.select2-container--default .select2-selection--multiple:hover{
  border-color: rgba(56,189,248,.35) !important;
  box-shadow:
    0 16px 26px rgba(0,0,0,.28),
    0 0 0 3px rgba(56,189,248,.12),
    0 0 22px rgba(56,189,248,.18) !important;
  transform: translateY(-1px);
}

/* focus / open */
.select2-container--default.select2-container--focus .select2-selection,
.select2-container--default.select2-container--open .select2-selection{
  border-color: rgba(56,189,248,.65) !important;
  box-shadow:
    0 18px 30px rgba(0,0,0,.32),
    0 0 0 3px rgba(56,189,248,.20),
    0 0 28px var(--ui-glow),
    0 0 48px var(--ui-glow2) !important;
}

/* text (single) */
.select2-container--default .select2-selection__rendered{
  line-height: 38px !important;
  color: var(--ui-text) !important;
  padding-left: 12px !important;
}

/* placeholder */
.select2-container--default .select2-selection__placeholder{
  color: rgba(229,243,255,.55) !important;
}

/* arrow */
.select2-container--default .select2-selection__arrow{
  height: 100% !important;
  right: 8px !important;
}
.select2-container--default .select2-selection__arrow b{
  border-color: rgba(56,189,248,.85) transparent transparent transparent !important;
  border-width: 6px 5px 0 5px !important;
  filter: drop-shadow(0 0 10px rgba(56,189,248,.25));
}

/* clear button */
.select2-container--default .select2-selection--single .select2-selection__clear{
  color: rgba(229,243,255,.85) !important;
  height: 40px !important;
  margin-right: 26px !important;
  opacity: .8 !important;
}
.select2-container--default .select2-selection--single .select2-selection__clear:hover{
  opacity: 1 !important;
  color: #fff !important;
  text-shadow: 0 0 10px rgba(56,189,248,.35);
}

/* ===============================
   DROPDOWN
   =============================== */
.select2-container--default .select2-dropdown{
  border-radius: 14px !important;
  border: 1px solid rgba(56,189,248,.30) !important;

  background: linear-gradient(180deg, rgba(2,6,23,.96), rgba(3,22,51,.94)) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);

  box-shadow:
    0 22px 44px rgba(0,0,0,.55),
    0 0 0 1px rgba(255,255,255,.06),
    0 0 28px rgba(56,189,248,.20) !important;

  overflow: hidden !important;
  padding: 6px !important;
}

/* search box (ถ้ามี) */
.select2-container--default .select2-search--dropdown .select2-search__field{
  border-radius: 12px !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  background: rgba(255,255,255,.06) !important;
  color: var(--ui-text) !important;
  outline: none !important;
  padding: 10px 12px !important;
}
.select2-container--default .select2-search--dropdown .select2-search__field:focus{
  border-color: rgba(56,189,248,.45) !important;
  box-shadow: 0 0 0 3px rgba(56,189,248,.18) !important;
}

/* option base */
.select2-container--default .select2-results__option{
  padding: 10px 12px !important;
  font-size: 14px !important;
  border-radius: 10px !important;
  color: rgba(229,243,255,.88) !important;
}

/* option hover */
.select2-container--default .select2-results__option--highlighted{
  background: linear-gradient(90deg, rgba(56,189,248,.26), rgba(37,99,235,.18)) !important;
  color: #fff !important;
  box-shadow: 0 0 0 1px rgba(56,189,248,.18), 0 0 18px rgba(56,189,248,.18) !important;
}

/* selected option */
.select2-container--default .select2-results__option[aria-selected=true]{
  background: rgba(56,189,248,.10) !important;
  color: #fff !important;
  font-weight: 600 !important;
  border: 1px solid rgba(56,189,248,.22) !important;
}

/* ===============================
   MULTIPLE TAGS
   =============================== */
.select2-container--default .select2-selection--multiple{
  padding: 4px 8px !important;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice{
  background: linear-gradient(135deg, rgba(37,99,235,.90), rgba(56,189,248,.80)) !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  color: #fff !important;

  border-radius: 999px !important;
  padding: 4px 10px !important;
  margin-top: 6px !important;

  box-shadow:
    0 0 0 1px rgba(255,255,255,.06),
    0 0 18px rgba(56,189,248,.18) !important;
}

.select2-container--default .select2-selection__choice__remove{
  color: rgba(255,255,255,.90) !important;
  margin-right: 6px !important;
  opacity: .85 !important;
}
.select2-container--default .select2-selection__choice__remove:hover{
  opacity: 1 !important;
  text-shadow: 0 0 12px rgba(56,189,248,.35);
}

/* ===============================
   FILTER INPUTS + ICON BUTTONS (match tabmenu)
   =============================== */
.input-filter,
#basemap{
  min-height: 42px !important;
  border-radius: 12px !important;
  border: 1px solid var(--ui-line) !important;

  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.04)) !important;
  color: var(--ui-text) !important;

  box-shadow:
    0 10px 18px rgba(0,0,0,.20),
    inset 0 1px 0 rgba(255,255,255,.06) !important;

  transition: transform .2s ease, box-shadow .25s ease, border-color .25s ease !important;
}


.input-filter:hover,
#basemap:hover{
  border-color: rgba(56,189,248,.35) !important;
  box-shadow:
    0 16px 26px rgba(0,0,0,.28),
    0 0 0 3px rgba(56,189,248,.12),
    0 0 22px rgba(56,189,248,.18) !important;
  transform: translateY(-1px);
}

/* ตอน active */
#basemap:focus,
#basemap:active{
  background:
    linear-gradient(180deg,
      rgba(56,189,248,.25),
      rgba(255,255,255,.05)) !important;

  border-color: rgba(56,189,248,.85) !important;

  box-shadow:
    0 0 0 3px rgba(56,189,248,.35),
    0 0 26px rgba(56,189,248,.55),
    0 0 46px rgba(37,99,235,.35) !important;
}

/* ถ้า basemap เป็น <select> ปกติ */
#basemap option{
  color: #020617 !important;
}
/* icon buttons */
.button-filter,
#switch-mode,
#setting-view-home{
  cursor: pointer;
  width: 42px;
  height: 42px;
  min-height: 42px !important;

  border-radius: 12px !important;
  border: 1px solid var(--ui-line) !important;
  background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.04)) !important;
  color: var(--ui-text) !important;

  display:flex;
  align-items:center;
  justify-content:center;

  box-shadow:
    0 10px 18px rgba(0,0,0,.20),
    inset 0 1px 0 rgba(255,255,255,.06) !important;

  transition: transform .2s ease, box-shadow .25s ease, border-color .25s ease, background .25s ease !important;
}

.button-filter:hover,
#switch-mode:hover,
#setting-view-home:hover{
  border-color: rgba(56,189,248,.40) !important;
  background: linear-gradient(90deg, rgba(56,189,248,.18), rgba(255,255,255,.04)) !important;
  box-shadow:
    0 16px 26px rgba(0,0,0,.28),
    0 0 0 3px rgba(56,189,248,.14),
    0 0 24px rgba(56,189,248,.20) !important;
  transform: translateY(-1px);
}

/* basemap padding (ของคุณมีอยู่แล้ว) */
#basemap{ padding: 5px 10px !important; }
/* ===============================
   MODERN LOADING OVERLAY
   =============================== */
#map-ui-loading-page {
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);

	background:
		radial-gradient(circle at center,
			rgba(37, 99, 235, .25),
			rgba(0, 0, 0, .65)) !important;

	animation: fadeIn .4s ease-out;
}

/* ข้อความ */
#map-ui-loading-page span {
	font-size: 1.1rem;
	letter-spacing: .04em;
	text-transform: uppercase;
	opacity: .9;

	text-shadow:
		0 0 6px rgba(255, 255, 255, .6),
		0 0 14px rgba(37, 99, 235, .6);
}

/* loader image */
#map-ui-loading-page img {
	width: 64px;
	height: 64px;
	filter:
		drop-shadow(0 0 6px rgba(37, 99, 235, .7)) drop-shadow(0 0 18px rgba(37, 99, 235, .6));
	animation: pulse 1.4s ease-in-out infinite;
}

/* ===============================
   ANIMATIONS
   =============================== */
@keyframes pulse {
	0% {
		transform: scale(.95);
		opacity: .7;
	}

	50% {
		transform: scale(1.05);
		opacity: 1;
	}

	100% {
		transform: scale(.95);
		opacity: .7;
	}
}

@keyframes fadeIn {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}


#map-ui-loading-page::before {
	content: '';
	position: absolute;
	inset: 0;
	background:
		linear-gradient(120deg,
			transparent,
			rgba(37, 99, 235, .35),
			transparent);
	animation: scan 2.5s linear infinite;
}

@keyframes scan {
	from {
		transform: translateX(-100%);
	}

	to {
		transform: translateX(100%);
	}
}


/* ===============================
   MENU SECOND – MODERN GLASS DARK
   =============================== */


/* panel container */
#menu-second{
  background: linear-gradient(180deg,var(--ms-bg1),var(--ms-bg2)) !important;
  border-right: 1px solid var(--ms-line) !important;

  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);

  box-shadow:
    12px 0 30px rgba(0,0,0,.45),
    inset -1px 0 0 rgba(255,255,255,.06),
    0 0 22px rgba(56,189,248,.18) !important;

  /* กันเนื้อหาติดขอบ */
  padding-bottom: 10px;
}

/* title */
#menu-second-title{
  color: var(--ms-text) !important;
  letter-spacing: .02em;
  text-shadow: 0 0 10px rgba(56,189,248,.25);
  position: sticky;
  top: 0;
  z-index: 2;
  background: linear-gradient(180deg, rgba(2,6,23,.92), rgba(2,6,23,.55)) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  font-size: 15px;
  border-bottom: 1px solid var(--ms-line);
}

/* content wrapper */
.menu-second-content{
  color: var(--ms-text) !important;
}

/* ===============================
   LINKS (panel 1)
   =============================== */
#menu-second-panel-1 a{
  background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.04)) !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  color: var(--ms-text) !important;

  box-shadow:
    0 10px 18px rgba(0,0,0,.20),
    inset 0 1px 0 rgba(255,255,255,.06) !important;

  transition: transform .25s ease, box-shadow .25s ease, background .25s ease !important;
  position: relative;
  overflow: hidden;
}

#menu-second-panel-1 a:hover{
  background: linear-gradient(90deg, rgba(56,189,248,.18), rgba(255,255,255,.05)) !important;
  box-shadow:
    0 16px 26px rgba(0,0,0,.28),
    0 0 0 1px rgba(56,189,248,.25),
    0 0 22px rgba(56,189,248,.25) !important;
  transform: translateY(-1px);
}

/* glow follow mouse แบบเบา (ไม่ใช้ JS ก็สวย) */
#menu-second-panel-1 a::after{
  content:'';
  position:absolute;
  inset:0;
  background: linear-gradient(120deg, transparent, rgba(255,255,255,.18), transparent);
  opacity:0;
  transition: .25s;
}
#menu-second-panel-1 a:hover::after{ opacity:1; }

/* icon */
#menu-second-panel-1 a .material-icons-outlined{
  color: var(--ms-accent) !important;
  filter: drop-shadow(0 0 8px rgba(56,189,248,.25));
}

/* ===============================
   PANEL MAIN MENU (accordion)
   =============================== */
.panel-main-menu > li.panel-menu-item{
  background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.04)) !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  color: var(--ms-text) !important;

  box-shadow:
    0 10px 18px rgba(0,0,0,.20),
    inset 0 1px 0 rgba(255,255,255,.06) !important;

  transition: transform .25s ease, box-shadow .25s ease, background .25s ease !important;
  overflow: hidden;
}

.panel-main-menu > li.panel-menu-item:hover{
  background: linear-gradient(90deg, rgba(56,189,248,.14), rgba(255,255,255,.04)) !important;
  box-shadow:
    0 16px 26px rgba(0,0,0,.28),
    0 0 0 1px rgba(56,189,248,.25),
    0 0 22px rgba(56,189,248,.22) !important;
  transform: translateY(-1px);
}

/* accordion header text */
.panel-main-menu > li.panel-menu-item > a{
  color: var(--ms-text) !important;
}

/* expand icon */
.panel-menu-icon{
  color: var(--ms-accent) !important;
  filter: drop-shadow(0 0 10px rgba(56,189,248,.25));
}

/* ===============================
   SUB MENU LIST
   =============================== */
.panel-sub-menu{
  scrollbar-width: thin;
  scrollbar-color: rgba(56,189,248,.35) rgba(255,255,255,.06);
}

.panel-sub-menu li{
  background: rgba(255,255,255,.03) !important;
  border: 1px solid rgba(255,255,255,.06) !important;
  transition: .2s !important;
}

.panel-sub-menu li:hover{
  background: rgba(56,189,248,.10) !important;
  border-color: rgba(56,189,248,.25) !important;
}

/* ===============================
   CHECKBOX / RADIO CUSTOM (ที่คุณทำเอง)
   =============================== */

/* กล่องวงกลม */
.layer-item + div,
.panel-6-radio-input + div{
  border-color: rgba(255,255,255,.25) !important;
}

/* ตอน checked */
.layer-item.peer:checked + div,
.panel-6-radio-input.peer:checked + div{
  background: linear-gradient(135deg, var(--ms-accent2), var(--ms-accent)) !important;
  border-color: rgba(56,189,248,.85) !important;
  box-shadow:
    0 0 0 2px rgba(56,189,248,.18),
    0 0 18px rgba(56,189,248,.35) !important;

}

/* ตัวหนังสือใน label */
.menu-second-content label span,
.menu-second-content > p,
.menu-second-content li span{
  color: var(--ms-text) !important;
}

/* ลดความสว่างพวก label เล็กๆ */
.menu-second-content legend{
  color: var(--ms-muted) !important;
}

/* ===============================
   FORM CONTROLS IN PANEL 6 (input/date/button)
   =============================== */
#menu-second-panel-6 label{
  color: var(--ms-text) !important;
}

#menu-second-panel-6 input[type="date"],
#menu-second-panel-6 select,
#menu-second-panel-6 .select2-selection{
  background: rgba(255,255,255,.06) !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  color: var(--ms-text) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06) !important;
}

#menu-second-panel-6 input[type="date"]:focus{
  outline: none !important;
  border-color: rgba(56,189,248,.45) !important;
  box-shadow:
    0 0 0 3px rgba(56,189,248,.18),
    0 0 18px rgba(56,189,248,.18) !important;
}

/* Query button */
#dashboard-query-button{
  background: linear-gradient(135deg, var(--ms-accent2), var(--ms-accent)) !important;
  color: #fff !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  box-shadow:
    0 12px 24px rgba(37,99,235,.25),
    0 0 18px rgba(56,189,248,.25) !important;
  transition: .25s !important;
}

#dashboard-query-button:hover{
  transform: translateY(-1px);
  box-shadow:
    0 16px 30px rgba(37,99,235,.32),
    0 0 26px rgba(56,189,248,.35) !important;
}

/* ===============================
   SCROLLBAR (Chrome/Edge)
   =============================== */
#menu-second::-webkit-scrollbar,
.panel-sub-menu::-webkit-scrollbar{
  width: 10px;
}
#menu-second::-webkit-scrollbar-thumb,
.panel-sub-menu::-webkit-scrollbar-thumb{
  background: linear-gradient(180deg, rgba(56,189,248,.45), rgba(37,99,235,.35));
  border-radius: 999px;
}
#menu-second::-webkit-scrollbar-track,
.panel-sub-menu::-webkit-scrollbar-track{
  background: rgba(255,255,255,.04);
}



/* ===============================
   MENU SECOND PANEL 2 – DARK / NEON
   (override tailwind bg-white/text-black/hover bg-gray)
   =============================== */
.panel-main-menu , #menu-second-panel-1 {
	margin-top: 5px;
}
#menu-second-panel-2{
  color: rgba(229,243,255,.92) !important;
}

/* กล่องเมนูหลัก (accordion item) */
#menu-second-panel-2 .panel-main-menu > li.panel-menu-item{
  background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.04)) !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  color: rgba(229,243,255,.95) !important;

  box-shadow:
    0 10px 18px rgba(0,0,0,.20),
    inset 0 1px 0 rgba(255,255,255,.06) !important;

  transition: transform .25s ease, box-shadow .25s ease, background .25s ease !important;
  overflow: hidden;

  padding: 10px 5px 5px 5px;
}

#menu-second-panel-2 .panel-main-menu > li.panel-menu-item:hover{
  background: linear-gradient(90deg, rgba(56,189,248,.14), rgba(255,255,255,.04)) !important;
  box-shadow:
    0 16px 26px rgba(0,0,0,.28),
    0 0 0 1px rgba(56,189,248,.25),
    0 0 22px rgba(56,189,248,.22) !important;
  transform: translateY(-1px);
}

/* header a */
#menu-second-panel-2 .panel-main-menu > li.panel-menu-item > a{
  display: block;
  color: rgba(229,243,255,.96) !important;
  font-weight: 600;
}

/* icon expand */
#menu-second-panel-2 .panel-menu-icon{
  color: #38bdf8 !important;
  filter: drop-shadow(0 0 10px rgba(56,189,248,.25));
  transition: transform .25s ease !important;
}

/* ถ้าคุณใส่ class open ให้หมุนไอคอน */
#menu-second-panel-2 .panel-menu-icon.open{
  transform: rotate(180deg);
}

/* ===============================
   SUB MENU (รายการด้านใน)
   =============================== */
#menu-second-panel-2 .panel-sub-menu{
  border-top: 1px solid rgba(255,255,255,.06);
  padding-top: 8px;
  scrollbar-width: thin;
  scrollbar-color: rgba(56,189,248,.35) rgba(255,255,255,.06);
  margin: 0px;
}

/* li ด้านใน (override hover:bg-gray-100/200) */
#menu-second-panel-2 .panel-sub-menu > li{
  background: rgba(255,255,255,.03) !important;
  border: 1px solid rgba(255,255,255,.06) !important;
  transition: .2s ease !important;
  position: relative;
  overflow: hidden;
}

#menu-second-panel-2 .panel-sub-menu > li:hover{
  background: rgba(56,189,248,.10) !important;
  border-color: rgba(56,189,248,.25) !important;
  box-shadow: 0 0 0 1px rgba(56,189,248,.12), 0 0 18px rgba(56,189,248,.12) !important;
}

/* แถบ highlight ซ้ายตอน hover */
#menu-second-panel-2 .panel-sub-menu > li::before{
  content:'';
  position:absolute;
  left:0;
  top:8px;
  bottom:8px;
  width:3px;
  background: linear-gradient(to bottom, transparent, #38bdf8, transparent);
  opacity:0;
  transition: .2s ease;
}
#menu-second-panel-2 .panel-sub-menu > li:hover::before{
  opacity:1;
}

/* ตัวหนังสือ */
#menu-second-panel-2 label span{
  color: rgba(229,243,255,.92) !important;
}

/* ===============================
   CUSTOM CHECKBOX / RADIO ที่คุณทำเอง
   (input.peer.hidden + div กลม)
   =============================== */

/* วงกลม */
#menu-second-panel-2 input.layer-item + div,
#menu-second-panel-2 input.panel-6-radio-input + div{
  border-color: rgba(255,255,255,.25) !important;
  background: rgba(255,255,255,.02) !important;
}

/* checked */
#menu-second-panel-2 input.layer-item.peer:checked + div,
#menu-second-panel-2 input.panel-6-radio-input.peer:checked + div{
  background: linear-gradient(135deg, #2563eb, #38bdf8) !important;
  border-color: rgba(56,189,248,.85) !important;
  box-shadow:
    0 0 0 2px rgba(56,189,248,.18),
    0 0 18px rgba(56,189,248,.35) !important;

	
}

/* icon check ให้คมขึ้น */
#menu-second-panel-2 input.layer-item.peer:checked + div svg,
#menu-second-panel-2 input.panel-6-radio-input.peer:checked + div svg{
  filter: drop-shadow(0 0 8px rgba(255,255,255,.35));
}

/* ===============================
   LEGEND / รูป legend (GetLegendGraphic)
   =============================== */
#menu-second-panel-2 legend{
  color: rgba(229,243,255,.70) !important;
}

#menu-second-panel-2 legend > div{
  border-color: rgba(56,189,248,.45) !important;
  box-shadow:
    0 0 0 1px rgba(56,189,248,.12),
    0 0 16px rgba(56,189,248,.10) !important;
}

/* รูป legend จาก geoserver */
#menu-second-panel-2 img{
  border-radius: 10px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.08);
  padding: 6px;
  box-shadow:
    0 10px 18px rgba(0,0,0,.25),
    0 0 22px rgba(56,189,248,.10);
	width: 100%;
}

/* ===============================
   SCROLLBAR (Chrome/Edge)
   =============================== */
#menu-second-panel-2 .panel-sub-menu::-webkit-scrollbar{
  width: 10px;
}
#menu-second-panel-2 .panel-sub-menu::-webkit-scrollbar-thumb{
  background: linear-gradient(180deg, rgba(56,189,248,.45), rgba(37,99,235,.35));
  border-radius: 999px;
}
#menu-second-panel-2 .panel-sub-menu::-webkit-scrollbar-track{
  background: rgba(255,255,255,.04);
}


/* ===============================
   ROUND CHECK (NEON / GLASS)
   ใช้กับโครงสร้าง:
   <input class="peer hidden layer-item">
   <div class="... rounded-full ..."> ... </div>
   =============================== */

/* ตัววงกลม (ตอนยังไม่ติ๊ก) */
#menu-second-panel-2 input.layer-item + div,
#menu-second-panel-2 input.panel-6-radio-input + div{
  width: 22px !important;
  height: 22px !important;

  border: 2px solid rgba(255,255,255,.22) !important;
  background:
    radial-gradient(circle at 30% 30%, rgba(255,255,255,.10), rgba(255,255,255,.02) 60%, rgba(0,0,0,.12)) !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    inset 0 -8px 14px rgba(0,0,0,.25),
    0 0 0 1px rgba(56,189,248,.08) !important;

  transition: transform .15s ease, box-shadow .2s ease, border-color .2s ease, background .2s ease !important;
  position: relative;
  overflow: hidden;
}

/* ไฮไลท์แก้ว (เส้นสะท้อน) */
#menu-second-panel-2 input.layer-item + div::before,
#menu-second-panel-2 input.panel-6-radio-input + div::before{
  content:'';
  position:absolute;
  inset: -40% -40%;
  background: linear-gradient(120deg, transparent 35%, rgba(255,255,255,.25), transparent 65%);
  transform: translateX(-40%);
  opacity: .55;
  transition: transform .35s ease, opacity .35s ease;
}

/* hover (เด้งนิด ๆ) */
#menu-second-panel-2 label:hover input.layer-item + div,
#menu-second-panel-2 label:hover input.panel-6-radio-input + div{
  transform: translateY(-1px) scale(1.02);
  border-color: rgba(56,189,248,.40) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.10),
    inset 0 -10px 16px rgba(0,0,0,.30),
    0 0 0 3px rgba(56,189,248,.14),
    0 0 22px rgba(56,189,248,.18) !important;
}

#menu-second-panel-2 label:hover input.layer-item + div::before,
#menu-second-panel-2 label:hover input.panel-6-radio-input + div::before{
  transform: translateX(40%);
  opacity: .9;
}

/* ===============================
   ตอน checked (Neon core + ring glow)
   =============================== */
#menu-second-panel-2 input.layer-item.peer:checked + div,
#menu-second-panel-2 input.panel-6-radio-input.peer:checked + div{
  border-color: rgba(56,189,248,.95) !important;
  background:
    radial-gradient(circle at 30% 30%, rgba(255,255,255,.40), rgba(56,189,248,.55) 35%, rgba(37,99,235,.75) 70%) !important;

  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.18),
    0 0 0 4px rgba(56,189,248,.16),
    0 0 26px rgba(56,189,248,.55),
    0 0 46px rgba(37,99,235,.35) !important;

	
}

/* วงแหวนพลังงาน (pulse) */
#menu-second-panel-2 input.layer-item.peer:checked + div::after,
#menu-second-panel-2 input.panel-6-radio-input.peer:checked + div::after{
  content:'';
  position:absolute;
  inset:-6px;
  border-radius: 999px;
  border: 1px solid rgba(56,189,248,.35);
  box-shadow: 0 0 18px rgba(56,189,248,.25);
  animation: neonPulse 1.4s ease-in-out infinite;
}

/* ไอคอนติ๊กให้ชัด + เรืองแสง */
#menu-second-panel-2 input.layer-item.peer:checked + div svg,
#menu-second-panel-2 input.panel-6-radio-input.peer:checked + div svg{
  filter:
    drop-shadow(0 0 6px rgba(255,255,255,.55))
    drop-shadow(0 0 16px rgba(56,189,248,.45));
}

/* animation */
@keyframes neonPulse{
  0%{ transform: scale(.92); opacity: .25; }
  50%{ transform: scale(1.08); opacity: .70; }
  100%{ transform: scale(.92); opacity: .25; }
}

/* ถ้าผู้ใช้ตั้ง reduced motion ให้หยุด pulse */
@media (prefers-reduced-motion: reduce){
  #menu-second-panel-2 input.layer-item.peer:checked + div::after,
  #menu-second-panel-2 input.panel-6-radio-input.peer:checked + div::after{
    animation: none;
  }
}


/* ===============================
   PANEL 6 - DASHBOARD THEME (dark + neon)
   =============================== */
#menu-second-panel-6{
  color: rgba(229,243,255,.90) !important;
}

/* ปรับ li ให้เป็น card */
#menu-second-panel-6 > ul > li{
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.04)) !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  border-radius: 14px !important;
  box-shadow: 0 12px 22px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.06) !important;
  transition: transform .2s ease, box-shadow .25s ease, border-color .25s ease, background .25s ease !important;
  margin: 5px 0 0 5px;
}

/* hover */
#menu-second-panel-6 > ul > li:hover{
  background: linear-gradient(90deg, rgba(56,189,248,.12), rgba(255,255,255,.04)) !important;
  border-color: rgba(56,189,248,.35) !important;
  box-shadow:
    0 18px 30px rgba(0,0,0,.26),
    0 0 0 3px rgba(56,189,248,.10),
    0 0 22px rgba(56,189,248,.18) !important;
  transform: translateY(-1px);
}

/* label จัดระยะให้สวย */
#menu-second-panel-6 label{
  width: 100%;
  padding: 10px 10px !important;
  gap: 10px !important;
}

/* ข้อความ */
#menu-second-panel-6 label span{
  color: rgba(229,243,255,.92) !important;
}

/* ===============================
   RADIO - GLOW CIRCLE
   ใช้โครงเดิม: input.peer + div.rounded-full
   =============================== */
#menu-second-panel-6 .panel-6-radio-input + div{
  width: 22px !important;
  height: 22px !important;

  border: 2px solid rgba(255,255,255,.22) !important;
  border-radius: 999px !important;

  background: rgba(255,255,255,.06) !important;
  box-shadow:
    inset 0 0 0 2px rgba(0,0,0,.18),
    0 0 0 0 rgba(56,189,248,0) !important;

  display:flex !important;
  align-items:center !important;
  justify-content:center !important;

  transition: transform .15s ease, box-shadow .25s ease, border-color .25s ease, background .25s ease !important;
}

/* hover ที่วงกลม */
#menu-second-panel-6 li:hover .panel-6-radio-input + div{
  border-color: rgba(56,189,248,.55) !important;
  box-shadow:
    inset 0 0 0 2px rgba(0,0,0,.18),
    0 0 0 3px rgba(56,189,248,.10),
    0 0 18px rgba(56,189,248,.22) !important;
  transform: scale(1.03);
}

/* ตอนเลือก (peer-checked) */
#menu-second-panel-6 .panel-6-radio-input:checked + div{
  background: radial-gradient(circle at 35% 30%, rgba(255,255,255,.35), rgba(56,189,248,.35) 35%, rgba(37,99,235,.30) 70%) !important;
  border-color: rgba(56,189,248,.95) !important;
  box-shadow:
    0 0 0 4px rgba(56,189,248,.18),
    0 0 22px rgba(56,189,248,.35),
    0 0 40px rgba(37,99,235,.22) !important;
}

/* svg check ให้กลางและคม */
#menu-second-panel-6 .panel-6-radio-input + div svg{
  width: 14px !important;
  height: 14px !important;
  stroke-width: 3 !important;
  filter: drop-shadow(0 0 10px rgba(255,255,255,.22));
}

/* ===============================
   FILTER PANEL (#dashboard-filter)
   =============================== */
#menu-second-panel-6 #dashboard-filter{
  background: linear-gradient(180deg, rgba(2,6,23,.55), rgba(3,22,51,.45)) !important;
  border: 1px solid rgba(56,189,248,.18) !important;
  border-radius: 16px !important;
  box-shadow:
    0 18px 34px rgba(0,0,0,.35),
    0 0 0 1px rgba(255,255,255,.06),
    0 0 26px rgba(56,189,248,.12) !important;
  padding: 12px !important;
}

/* label ใน filter ให้เป็นสีสว่าง (แทน text-gray-700) */
#menu-second-panel-6 #dashboard-filter label{
  color: rgba(229,243,255,.86) !important;
}

/* input date ให้เข้าชุด dark neon */
#menu-second-panel-6 #dashboard-filter input[type="date"]{
  border-radius: 999px !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  background: rgba(255,255,255,.06) !important;
  color: rgba(229,243,255,.92) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06) !important;
  outline: none !important;
}

#menu-second-panel-6 #dashboard-filter input[type="date"]:focus{
  border-color: rgba(56,189,248,.55) !important;
  box-shadow:
    0 0 0 3px rgba(56,189,248,.18),
    0 0 22px rgba(56,189,248,.22) !important;
}

/* ปุ่ม Query ให้เป็น neon */
#menu-second-panel-6 #dashboard-query-button{
  background: linear-gradient(135deg, rgba(37,99,235,.90), rgba(56,189,248,.80)) !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  color: #fff !important;
  border-radius: 12px !important;

  box-shadow:
    0 10px 18px rgba(0,0,0,.22),
    0 0 24px rgba(56,189,248,.18) !important;

  transition: transform .15s ease, box-shadow .25s ease, filter .25s ease !important;
}

#menu-second-panel-6 #dashboard-query-button:hover{
  transform: translateY(-1px);
  box-shadow:
    0 16px 28px rgba(0,0,0,.30),
    0 0 0 3px rgba(56,189,248,.18),
    0 0 34px rgba(56,189,248,.24) !important;
}

#menu-second-panel-6 #dashboard-query-button:active{
  transform: translateY(0px) scale(.98);
  filter: brightness(.95);
}

#menu-third {
	background: linear-gradient(180deg,var(--ms-bg1),var(--ms-bg2)) !important;
}

/* ===============================
   FLOAT TOOL – DARK NEON
   =============================== */

#tool-use-dash{
  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.12),
      rgba(2,6,23,.85)
    ) !important;

  border-radius: 10px !important;
  padding: 10px 14px !important;

  border: 1px solid rgba(56,189,248,.35) !important;

  /* box-shadow:
    0 18px 40px rgba(0,0,0,.55),
    0 0 24px rgba(56,189,248,.35) !important; */

  backdrop-filter: blur(8px);
  transition: all .35s ease;

  
  margin-top: 10px !important;
}

/* hover card */
#tool-use-dash:hover{
  box-shadow:
    0 22px 48px rgba(0,0,0,.7),
    0 0 34px rgba(56,189,248,.55) !important;
}

/* ===============================
   RADIO / CHECKBOX NEON
   =============================== */

#tool-use-dash label{
  color: #e5f3ff !important;
  font-weight: 500;
}

/* วงกลม */
#tool-use-dash label > div{
  position: relative;
  border-color: rgba(56,189,248,.6) !important;
  background: rgba(255,255,255,.05);
  transition: all .25s ease;
}

/* hover วงกลม */
#tool-use-dash label:hover > div{
  box-shadow:
    0 0 0 2px rgba(56,189,248,.35),
    0 0 14px rgba(56,189,248,.6);
}

/* checked */
#tool-use-dash input:checked + div{
  background:
    radial-gradient(
      circle at 30% 30%,
      #7dd3fc,
      #0284c7
    ) !important;

  border-color: #38bdf8 !important;

  box-shadow:
    0 0 0 3px rgba(56,189,248,.35),
    0 0 18px rgba(56,189,248,.85),
    inset 0 0 6px rgba(255,255,255,.6);
}

/* ไอคอนติ๊ก */
#tool-use-dash svg{
  filter: drop-shadow(0 0 6px rgba(255,255,255,.9));
}

/* ===============================
   GLOW BAR ด้านซ้าย (motion feel)
   =============================== */

#tool-use-dash::before{
  content:'';
  position:absolute;
  left:0;
  top:10px;
  bottom:10px;
  width:3px;

  background: linear-gradient(
    to bottom,
    transparent,
    #38bdf8,
    transparent
  );

  box-shadow: 0 0 12px rgba(56,189,248,.8);
  border-radius: 2px;

}

/* ===============================
   ACTIVE STATE (เปิดใช้งาน)
   =============================== */

#tool-use-dash:has(input:checked){
  background:
    linear-gradient(
      180deg,
      rgba(56,189,248,.25),
      rgba(2,6,23,.9)
    ) !important;

  box-shadow:
    0 0 0 2px rgba(56,189,248,.45),
    0 0 36px rgba(56,189,248,.65),
    0 22px 48px rgba(0,0,0,.7) !important;
}


/* ===================================================
   jQuery UI DIALOG – DARK / NEON / GLASS (IMPORTANT)
   =================================================== */

/* กล่องหลัก */
.ui-dialog{
  border-radius: 14px !important;
  border: 1px solid rgba(56,189,248,.35) !important;
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(2,6,23,.88)) !important;

  box-shadow:
    0 26px 60px rgba(0,0,0,.65),
    0 0 30px rgba(0,148,208,.28) !important;

  backdrop-filter: blur(10px);
  overflow: hidden !important;
}

/* เส้น glow บนหัว */
.ui-dialog::before{
  content:'';
  position:absolute;
  top:0; left:10px; right:10px;
  height:2px;
  background: linear-gradient(90deg, transparent, rgba(56,189,248,.95), transparent);
  box-shadow: 0 0 14px rgba(56,189,248,.75);
  pointer-events:none;
  z-index: 1;
}

/* titlebar */
.ui-dialog .ui-dialog-titlebar{
  border: none !important;
  border-bottom: 1px solid rgba(255,255,255,.08) !important;

  background: linear-gradient(180deg, #0ea5e9, #0284c7 60%, #0369a1) !important;
  color: #fff !important;

  padding: 10px 12px !important;
  position: relative;
  border-radius: 10px ;
}

/* ตัวอักษร title */
.ui-dialog .ui-dialog-title{
  font-weight: 700 !important;
  letter-spacing: .2px;
  text-shadow: 0 0 10px rgba(255,255,255,.35);
}

/* ปุ่ม close */
.ui-dialog .ui-dialog-titlebar-close{
  border: none !important;
  background: rgba(2,6,23,.25) !important;
  border-radius: 10px !important;
  width: 30px !important;
  height: 30px !important;

  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.10),
    0 0 0 0 rgba(56,189,248,0) !important;

  transition: .2s ease !important;
  margin-top: -15px;
}

/* hover close */
.ui-dialog .ui-dialog-titlebar-close:hover{
  background: rgba(2,6,23,.45) !important;
  box-shadow:
    0 0 0 2px rgba(56,189,248,.35),
    0 0 14px rgba(56,189,248,.55) !important;
}

/* icon close (ถ้าใช้ ui-icon-closethick) */
.ui-dialog .ui-dialog-titlebar-close .ui-icon{
  filter: brightness(10) drop-shadow(0 0 6px rgba(255,255,255,.5));
  opacity: .95;
}

/* เนื้อหา */
.ui-dialog .ui-dialog-content{
  background: transparent !important;
  color: #e5f3ff !important;
  padding: 12px !important;
}

/* ตารางใน dialog */
.ui-dialog table{
  border-collapse: separate !important;
  border-spacing: 0 !important;
}

.ui-dialog .overflow-x-auto{
  border-radius: 12px !important;
  border: 1px solid rgba(56,189,248,.22) !important;
  background: rgba(255,255,255,.04) !important;

  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.05),
    0 0 22px rgba(56,189,248,.12) !important;
}

/* thead */
.ui-dialog thead{
  background: rgba(2,6,23,.55) !important;
  color: #cfe9ff !important;
}

.ui-dialog thead th{
  padding: 8px 10px !important;
  font-weight: 700 !important;
  border-bottom: 1px solid rgba(255,255,255,.08) !important;
}

/* tbody row */
.ui-dialog tbody tr{
  background: transparent !important;
  transition: .2s ease !important;
}

.ui-dialog tbody td{
  padding: 8px 10px !important;
  border-bottom: 1px solid rgba(255,255,255,.06) !important;
  color: #e5f3ff !important;
}

/* hover row */
.ui-dialog tbody tr:hover{
  background: linear-gradient(90deg, rgba(56,189,248,.16), rgba(255,255,255,.03)) !important;
}

/* resizable handles ให้เนียน */
.ui-dialog .ui-resizable-handle{
  opacity: .25 !important;
}
.ui-dialog:hover .ui-resizable-handle{
  opacity: .55 !important;
}
.ui-dialog .ui-resizable-se{
  filter: drop-shadow(0 0 10px rgba(56,189,248,.35));
}

/* focus outline กันหลุดธีม */
.ui-dialog :focus{
  outline: none !important;
  box-shadow: none !important;
}