/* 🌗 Oasis NEXT Dark/Light Theme — sidebar fix no white border (Bunnie) */
:root {
  --radius: 1rem;
  --elev: 0 8px 24px rgba(0,0,0,.08);
  --transition: 150ms ease-in-out;
}

body.light-layout {
  --bg: #f7f8fa;
  --card: #ffffff;
  --text: #1a1f2b;
  --muted: #5b6170;
  --primary: #0ea5e9;
  --primary-contrast: #ffffff;
}

body.dark-layout {
  --bg: #0f172a;
  --card: #111827;
  --text: #e5e7eb;
  --muted: #9aa1ad;
  --primary: #38bdf8;
  --primary-contrast: #0b1220;
}

/* ===== Base ===== */
body {
  background: var(--bg);
  color: var(--text);
  transition: background-color var(--transition), color var(--transition);
}
.card, .content-wrapper .content-body .card, .modal-content, .dropdown-menu, .navbar, .footer {
  background-color: var(--card) !important;
  color: var(--text) !important;
  border-radius: var(--radius) !important;
  box-shadow: var(--elev) !important;
  border: 1px solid rgba(125,125,125,.08) !important;
}

/* Buttons */
.btn, .badge, .nav-pills .nav-link, .page-item .page-link {
  border-radius: calc(var(--radius) - .25rem) !important;
  transition: transform var(--transition), box-shadow var(--transition);
}
.btn-primary, .badge-primary { background-color: var(--primary) !important; border-color: var(--primary) !important; color: var(--primary-contrast) !important; }
.btn-primary:hover { transform: translateY(-1px); }

/* Inputs */
.form-control, .custom-select, .select2-container--default .select2-selection--single {
  background-color: var(--card) !important;
  color: var(--text) !important;
  border-radius: var(--radius) !important;
  border-color: rgba(125,125,125,.25) !important;
}

/* Tables */
.table { color: var(--text) !important; }
.table thead th { background: rgba(125,125,125,.08) !important; color: var(--text) !important; }

/* Smooth hover */
a, .btn, .list-group-item, .dropdown-item {
  transition: background-color var(--transition), color var(--transition), transform var(--transition);
}

/* Theme toggle icon */
#themeToggleBtn{
  display:inline-flex;align-items:center;justify-content:center;width:2.25rem;height:2.25rem;border-radius:999px;
  border:1px solid rgba(125,125,125,.2);background:transparent;
}
#themeToggleBtn i{font-size:1.1rem}

/* =========================================================
   🔧 Sidebar & Submenu – Dark Mode (no white border anywhere)
   ========================================================= */

/* Base sidebar surface */
body.dark-layout .main-menu,
body.dark-layout .main-menu .navbar-header,
body.dark-layout .main-menu .main-menu-content,
body.dark-layout .main-menu .navigation {
  background-color:#0b1220 !important;
  color:var(--text) !important;
  border:none !important;
  box-shadow:none !important;
}

/* Top-level link */
body.dark-layout .main-menu .navigation>li>a{
  background:transparent !important;
  color:var(--text) !important;
  border-radius:.75rem !important;
  border:none !important;
  box-shadow:none !important;
  outline:none !important;
}
body.dark-layout .main-menu .navigation>li>a:hover,
body.dark-layout .main-menu .navigation>li>a:focus{
  background-color:rgba(255,255,255,.06) !important;
  color:var(--text) !important;
  border:none !important;
  box-shadow:none !important;
  outline:none !important;
}

/* Active group (current section) */
body.dark-layout .main-menu .navigation>li.active>a,
body.dark-layout .main-menu .navigation>li.sidebar-group-active>a{
  background-color:rgba(56,189,248,.15) !important;
  color:var(--primary) !important;
  box-shadow:inset 0 0 0 1px rgba(56,189,248,.22) !important;
  border:none !important;
}

/* Open group (expanded but not active) */
body.dark-layout .main-menu .navigation>li.open:not(.active):not(.sidebar-group-active),
body.dark-layout .main-menu .navigation>li.open:not(.active):not(.sidebar-group-active)>a{
  background:transparent !important;
  color:var(--text) !important;
  border:none !important;
  box-shadow:none !important;
}
body.dark-layout .main-menu .navigation>li.open:not(.active):not(.sidebar-group-active)>a{
  background-color:rgba(255,255,255,.045) !important;
  border:none !important;
}

/* Kill any template pseudo overlays causing border */
body.dark-layout .main-menu .navigation>li>a::before,
body.dark-layout .main-menu .navigation>li>a::after,
body.dark-layout .main-menu .navigation>li.open:not(.active):not(.sidebar-group-active)>a::before,
body.dark-layout .main-menu .navigation>li.open:not(.active):not(.sidebar-group-active)>a::after{
  content:none !important;
  display:none !important;
}

/* Submenu container — unified look (no outer border) */
body.dark-layout .main-menu .menu-content,
body.dark-layout .main-menu .navigation .menu-content,
body.dark-layout .main-menu .navigation .menu-content.show,
body.dark-layout .main-menu .navigation li.has-sub.open>a+ul.menu-content{
  background-color:#0f172a !important;
  color:var(--text) !important;
  border:none !important;               /* ⛔ remove white frame */
  outline:none !important;              /* ⛔ remove outlines */
  box-shadow:0 12px 30px rgba(0,0,0,.30) !important; /* soft shadow only */
  border-radius:.75rem !important;
  overflow:hidden !important;           /* hide any inner corner seams */
}

/* Remove inner separators that might be white */
body.dark-layout .main-menu .navigation .menu-content>li{
  border:none !important;
}

/* Submenu items */
body.dark-layout .main-menu .navigation .menu-content>li>a{
  background:transparent !important;
  color:var(--text) !important;
  border:none !important;
  border-radius:.5rem !important;
  padding-left:2.25rem !important;
  box-shadow:none !important;
}
body.dark-layout .main-menu .navigation .menu-content>li>a:hover{
  background-color:rgba(255,255,255,.06) !important;
  color:var(--primary) !important;
}
body.dark-layout .main-menu .navigation .menu-content>li.active>a{
  color:var(--primary) !important;
  background-color:rgba(56,189,248,.12) !important;
  box-shadow:none !important;
  border:none !important;
}

/* Inherit icon/text color from parent */
body.dark-layout .main-menu .navigation li a i,
body.dark-layout .main-menu .navigation li a .menu-title{ color:inherit !important; }

/* Section header / divider */
body.dark-layout .main-menu .navigation .navigation-header{ color:var(--muted) !important; }
body.dark-layout .main-menu .navigation .menu-content .divider,
body.dark-layout .main-menu .navigation .divider{ border-color:rgba(255,255,255,.08) !important; }

/* Shadow fade at the bottom of sidebar */
body.dark-layout .main-menu .shadow-bottom{
  background:linear-gradient(to bottom, rgba(0,0,0,.35), rgba(0,0,0,0)) !important;
}

/* Dropdown inside sidebar */
body.dark-layout .main-menu .dropdown-menu{
  background-color:#0f172a !important;
  color:var(--text) !important;
  border:none !important;            /* remove frame */
  border-radius:.75rem !important;
  box-shadow:0 12px 30px rgba(0,0,0,.30) !important;
}

/* Kill any utility/inlined whites */
body.dark-layout .main-menu .bg-white,
body.dark-layout .main-menu .bg-light,
body.dark-layout .main-menu [style*="background:#fff"],
body.dark-layout .main-menu [style*="background: #fff"],
body.dark-layout .main-menu [style*="background-color:#fff"],
body.dark-layout .main-menu [style*="background-color: #fff"]{
  background-color:transparent !important;
  color:var(--text) !important;
  border:none !important;
  box-shadow:none !important;
}

/* Focus state (accessible but dark-friendly) */
body.dark-layout .main-menu a:focus{
  outline:2px solid rgba(56,189,248,.35) !important;
  outline-offset:2px !important;
}
body.dark-layout .main-menu a:focus:not(:focus-visible){ outline:none !important; }

/* Spacing when open */
body.dark-layout .main-menu .navigation>li.open{ margin-bottom:.25rem; }

/* ==== Place the menu-lock button at the top-right of the sidebar ==== */

/* ให้ .main-menu เป็นตำแหน่งอ้างอิง */
.main-menu { position: relative; }

/* ปุ่มล็อคเมนู (เราจะใส่ id นี้ให้ปุ่มด้วย JS ด้านล่าง) */
#menuLockBtn {
  position: absolute;
  top: 18px;
  right: 18px;
  width: 36px;
  height: 36px;
  border-radius: .75rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  z-index: 50;

  /* โทนมืด/สว่าง */
  background: rgba(255,255,255,.06);
  color: var(--text);
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 6px 16px rgba(0,0,0,.18);
  transition: transform 140ms ease, background-color 140ms ease, box-shadow 140ms ease;
}
#menuLockBtn:hover {
  background: rgba(56,189,248,.15);
  color: var(--primary);
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(0,0,0,.22);
}

/* Light mode ปรับพื้น/เส้นขอบให้ใสสะอาด */
body.light-layout #menuLockBtn {
  background: #fff;
  border-color: rgba(0,0,0,.08);
  color: #1a1f2b;
}

/* ถ้าใช้ไอคอนของ boxicons/feather ให้รับสีจากปุ่ม */
#menuLockBtn i, #menuLockBtn svg { color: inherit; fill: currentColor; }

/* กันชน: ถ้าด้านบนมี header ภายใน .main-menu ให้ปุ่มวางทับมุมขวาได้ */
.main-menu .navbar-header { position: relative; }

body.dark-layout #datatable.table tbody td a:hover {
  text-decoration: underline;
}

/* ข้อความจาง (text-muted) ให้ยังอ่านออก ไม่หายไปกับพื้นหลัง */
body.dark-layout #datatable.table tbody td .text-muted,
body.dark-layout #datatable.table tbody td small {
  color: rgba(229, 231, 235, 0.78) !important;
}

/* ถ้ามีคลาส text-dark/text-body หลุดมาในตาราง ให้ดึงกลับให้สว่าง */
body.dark-layout #datatable.table tbody td .text-dark,
body.dark-layout #datatable.table tbody td .text-body {
  color: var(--text) !important;
}


/* FIX: Dark mode SET column readability (preserve custom colors)
   - Default text in SET column (col 6) should be white in dark mode
   - If inline style forces black (common when no custom color is set), override ONLY those black styles to white
*/
body.dark-layout .app-content table tbody td:nth-child(6),
body.dark-layout .app-content #datatable tbody td:nth-child(6),
body.dark-layout .app-content table.dataTable tbody td:nth-child(6) {
  color: #ffffff;
}

/* Override only inline-black colors inside SET column */
body.dark-layout .app-content table tbody td:nth-child(6) [style*="color:#000"],
body.dark-layout .app-content table tbody td:nth-child(6) [style*="color: #000"],
body.dark-layout .app-content table tbody td:nth-child(6) [style*="color:#000000"],
body.dark-layout .app-content table tbody td:nth-child(6) [style*="color: #000000"],
body.dark-layout .app-content table tbody td:nth-child(6) [style*="color:black"],
body.dark-layout .app-content table tbody td:nth-child(6) [style*="color: black"] {
  color: #9CA3AF !important;
}

/* FIX: Dark mode 'หน่วยงาน' color should match light mode (only this table) */
body.dark-layout .app-content #datatable.table tbody td:nth-child(1),
body.dark-layout .app-content #datatable.table tbody td:nth-child(1) a,
body.dark-layout .app-content #datatable.table tbody td:nth-child(1) span,
body.dark-layout .app-content #datatable.table tbody td:nth-child(1) small,
body.dark-layout .app-content #datatable.table tbody td:nth-child(1) i {
  color: var(--primary) !important;
}

/* FIX: Dark mode '(แลกภายใน)' — keep normal link/info colors, but force the marker to teal */
body.dark-layout .app-content #datatable.table tbody td:nth-child(6) .text-info,
body.dark-layout .app-content #datatable.table tbody td:nth-child(6) a.text-info,
body.dark-mode   .app-content #datatable.table tbody td:nth-child(6) .text-info,
body.dark-mode   .app-content #datatable.table tbody td:nth-child(6) a.text-info {
  color: var(--primary) !important;
}

body.dark-layout .app-content #datatable.table tbody td:nth-child(6) .exchange-internal,
body.dark-mode   .app-content #datatable.table tbody td:nth-child(6) .exchange-internal {
  color: #2EC4C6 !important;
}

/* --------------------------------------------------------------
   Dark mode: make "ชื่อ SET" column readable
   - SET ยืม: keep existing special colors, but if the helper renders black, lift it.
   - จ่ายออกหน่วยงาน: color the whole "ชื่อ SET" column.
   - จ่ายออกแบบตระกร้า: color the set name text.
-------------------------------------------------------------- */

/* SET ยืม (set/borrow) — only override black */
body.dark-layout .set-name-text[style*="color:#000"],
body.dark-layout .set-name-text[style*="color: #000"],
body.dark-layout .set-name-text[style*="color:#000000"],
body.dark-layout .set-name-text[style*="color: #000000"],
body.dark-layout .set-name-text[style*="color:black"],
body.dark-layout .set-name-text[style*="color: black"],
body.dark-mode   .set-name-text[style*="color:#000"],
body.dark-mode   .set-name-text[style*="color: #000"],
body.dark-mode   .set-name-text[style*="color:#000000"],
body.dark-mode   .set-name-text[style*="color: #000000"],
body.dark-mode   .set-name-text[style*="color:black"],
body.dark-mode   .set-name-text[style*="color: black"] {
  color: #9CA3AF !important;
}

/* จ่ายออกหน่วยงาน (DataTable column class) */
body.dark-layout td.outbound-dep-setname,
body.dark-layout td.outbound-dep-setname span,
body.dark-mode   td.outbound-dep-setname,
body.dark-mode   td.outbound-dep-setname span {
  color: #9CA3AF !important;
}

/* จ่ายออกแบบตระกร้า */
body.dark-layout .outbound-setname-text,
body.dark-mode   .outbound-setname-text {
  color: #9CA3AF !important;
}