/* =========================================================
   ADMIN2026 STYLE (LEAN v3) - Refactored & Neumorphism
   (Fixed: Modal Stacking Context & Soft Dark Colors)
   ========================================================= */

/* -----------------------------------------
   1. FONTS
   ----------------------------------------- */
@font-face {
  font-family: "Prompt";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/Prompt-Regular.ttf") format("truetype");
}
@font-face {
  font-family: "Prompt";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/Prompt-Medium.ttf") format("truetype");
}
@font-face {
  font-family: "Prompt";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/Prompt-SemiBold.ttf") format("truetype");
}
@font-face {
  font-family: "Prompt";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/Prompt-Bold.ttf") format("truetype");
}

* { font-family: "Prompt", sans-serif !important; }

/* Font Awesome Restore */
.fa, .fas, .far, .fab, .fal, .fad, [class^="fa-"], [class*=" fa-"] {
  font-family: "Font Awesome 5 Free" !important; font-weight: 900;
}
.far, .fa-regular { font-weight: 400 !important; }
.fab, .fa-brands { font-family: "Font Awesome 5 Brands" !important; font-weight: 400 !important; }

/* -----------------------------------------
   2. CSS VARIABLES (THEME)
   ----------------------------------------- */
body:not(.dark-mode) {
  --neo-bg: #eef1f5;
  --neo-bg-2: #f7f9fc;
  --neo-text: #1f2937;
  --neo-muted: #6b7280;
  --neo-shadow-dark: rgba(163, 177, 198, .55);
  --neo-shadow-light: rgba(255, 255, 255, .95);
  --neo-radius: 14px;
  --neo-radius-lg: 18px;
  --neo-border: rgba(255, 255, 255, .7);
}

body.dark-mode {
  /* แก้สีที่นี่ให้ Soft ขึ้น โดยไม่ต้องพึ่ง filter */
  --neo-bg: #1e293b;         /* สว่างขึ้นจากดำมืด สบายตา */
  --neo-bg-2: #273449;       /* ตัดกับพื้นหลังให้มีมิติ */
  --neo-text: #e2e8f0;       /* ขาวหม่น ลดการสะท้อนเข้าตา */
  --neo-muted: #94a3b8;
  --neo-shadow-dark: rgba(0, 0, 0, .4); /* เงาซอฟต์ลง */
  --neo-shadow-light: rgba(255, 255, 255, .03);
  --neo-radius: 14px;
  --neo-radius-lg: 18px;
  --neo-border: rgba(255, 255, 255, .05);
}

/* -----------------------------------------
   3. BASE & LAYOUT (Header, Sidebar, Footer)
   ----------------------------------------- */
html.dark-mode body { background: var(--neo-bg); }

body, .content-wrapper, .main-footer {
  background: var(--neo-bg) !important;
  color: var(--neo-text);
}

.text-muted { color: var(--neo-muted) !important; }
.content-header h1 { font-size: 1.6rem; font-weight: 600; }

.main-header.navbar, .main-sidebar, .card, .info-box, .callout, .modal-content, .small-box {
  background: var(--neo-bg) !important;
  border: 1px solid var(--neo-border) !important;
  border-radius: var(--neo-radius-lg) !important;
  box-shadow: 8px 8px 18px var(--neo-shadow-dark), -8px -8px 18px var(--neo-shadow-light) !important;
}

.main-header.navbar {
  border: 0 !important; margin: 8px 8px 0 8px;
  box-shadow: 6px 6px 14px var(--neo-shadow-dark), -6px -6px 14px var(--neo-shadow-light) !important;
}
.main-sidebar { border: 0 !important; z-index: 1040 !important; }
.card-header { background: transparent !important; border-bottom: 0 !important; }

.main-footer {
  border: 0 !important; border-radius: var(--neo-radius-lg); margin: 8px;
  box-shadow: 6px 6px 14px var(--neo-shadow-dark), -6px -6px 14px var(--neo-shadow-light) !important;
  color: var(--neo-muted);
}

/* Fix text colors in navbar */
.main-header.navbar .nav-link, .main-header.navbar a, .main-header.navbar i, .main-header.navbar .navbar-nav .nav-item .nav-link { color: var(--neo-text) !important; }
body.dark-mode .main-header.navbar.navbar-light .nav-link, body.dark-mode .main-header.navbar.navbar-light a, body.dark-mode .main-header.navbar.navbar-light i, body.dark-mode .main-header.navbar .text-dark { color: var(--neo-text) !important; }

/* Sidebar Navigation */
.nav-sidebar .nav-link { border-radius: 12px; margin: 2px 0; transition: all .12s ease-in-out; }
.nav-sidebar .nav-link:hover { background: var(--neo-bg-2) !important; box-shadow: inset 3px 3px 6px var(--neo-shadow-dark), inset -3px -3px 6px var(--neo-shadow-light) !important; }
.nav-sidebar .nav-icon, .nav-sidebar .fas, .nav-sidebar .far, .nav-sidebar .fab { color: inherit !important; opacity: .95; }

body:not(.dark-mode) .nav-sidebar .nav-icon, body:not(.dark-mode) .nav-sidebar .fas { color: #334155 !important; }
body.dark-mode .nav-sidebar .nav-icon, body.dark-mode .nav-sidebar .fas { color: #e2e8f0 !important; }

.nav-sidebar .nav-icon {
  background: var(--neo-bg-2); border-radius: 10px; width: 30px; height: 30px;
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: 2px 2px 5px var(--neo-shadow-dark), -2px -2px 5px var(--neo-shadow-light);
}

body:not(.dark-mode) .nav-sidebar .nav-link.active .nav-icon { color: #111827 !important; }
body:not(.dark-mode) .main-sidebar .brand-text, body:not(.dark-mode) .main-sidebar .user-panel .info a, body:not(.dark-mode) .main-sidebar .nav-sidebar .nav-link p { color: #0f172a !important; opacity: 1 !important; }
body:not(.dark-mode) .main-sidebar .text-muted, body:not(.dark-mode) .main-sidebar .nav-header { color: #475569 !important; opacity: 1 !important; }

/* -----------------------------------------
   4. COMPONENTS
   ----------------------------------------- */
/* Tables */
.table { background: transparent; }
.table thead th { background: var(--neo-bg-2) !important; border-bottom: 0 !important; color: var(--neo-text); }
.table tbody tr { background: var(--neo-bg); border-top: 1px solid rgba(0, 0, 0, .03); }
body.dark-mode .table tbody tr { border-top: 1px solid rgba(255, 255, 255, .05); }

.table-neumorph-wrapper {
  border-radius: 15px; overflow: hidden; background: #fff; border: 1px solid #f0f0f0;
  box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.05), -5px -5px 15px rgba(255, 255, 255, 0.8);
}
body.dark-mode .table-neumorph-wrapper { background: var(--neo-bg); border: 1px solid var(--neo-border); box-shadow: none; }

/* Switch Toggle */
.switch { position: relative; display: inline-block; width: 44px; height: 24px; margin: 0; }
.switch input { opacity: 0; width: 0; height: 0; }
.slider { position: absolute; inset: 0; cursor: pointer; background: #cbd5e1; transition: .2s; border-radius: 999px; }
.slider:before { content: ""; position: absolute; left: 3px; top: 3px; width: 18px; height: 18px; background: #fff; border-radius: 50%; transition: .2s; box-shadow: 0 1px 4px rgba(0, 0, 0, .2); }
.switch input:checked+.slider { background: #111827; }
body.dark-mode .switch input:checked+.slider { background: #3b82f6; }
.switch input:checked+.slider:before { transform: translateX(20px); }

/* Small Box */
.small-box { border-radius: 20px !important; padding: 18px 18px 14px !important; min-height: 140px; position: relative; overflow: hidden; box-shadow: 10px 10px 22px var(--neo-shadow-dark), -10px -10px 22px var(--neo-shadow-light) !important; }
.small-box .inner h3 { font-size: 28px !important; font-weight: 700 !important; margin: 0 0 4px 0 !important; letter-spacing: .2px; }
.small-box .inner p { font-size: 14px !important; margin: 0 !important; color: var(--neo-muted) !important; }
.small-box .icon { top: 12px !important; right: 14px !important; font-size: 44px !important; opacity: .18 !important; color: #475569 !important; }
body.dark-mode .small-box .icon { opacity: .28 !important; color: #cbd5e1 !important; }
.small-box .small-box-footer { margin-top: 12px !important; padding: 8px 10px !important; border-radius: 12px !important; background: var(--neo-bg-2) !important; color: var(--neo-text) !important; box-shadow: inset 3px 3px 6px var(--neo-shadow-dark), inset -3px -3px 6px var(--neo-shadow-light) !important; text-decoration: none !important; }
.small-box .small-box-footer:hover { transform: translateY(-1px); }

/* Pagination */
.pagination .page-link { background: var(--neo-bg-2) !important; border: 0 !important; border-radius: 10px !important; box-shadow: 3px 3px 6px var(--neo-shadow-dark), -3px -3px 6px var(--neo-shadow-light) !important; margin: 0 3px; color: var(--neo-text); }

/* -----------------------------------------
   5. BUTTONS
   ----------------------------------------- */
.btn {
  background: var(--neo-bg-2) !important; color: var(--neo-text) !important; border: 0 !important; border-radius: var(--neo-radius) !important; padding: .45rem .9rem !important;
  box-shadow: 6px 6px 12px var(--neo-shadow-dark), -6px -6px 12px var(--neo-shadow-light) !important; transition: all .12s ease-in-out;
}
.btn:hover { transform: translateY(-1px); box-shadow: 8px 8px 16px var(--neo-shadow-dark), -8px -8px 16px var(--neo-shadow-light) !important; }
.btn:active, .btn.active { transform: translateY(0); box-shadow: inset 4px 4px 8px var(--neo-shadow-dark), inset -4px -4px 8px var(--neo-shadow-light) !important; }
body:not(.dark-mode) .btn i, body:not(.dark-mode) .btn .fas { color: #0f172a !important; opacity: .98; }
body:not(.dark-mode) .btn-primary { color: #3b82f6 !important; }
body:not(.dark-mode) .btn-success { color: #10b981 !important; }
body:not(.dark-mode) .btn-warning { color: #f59e0b !important; }
body:not(.dark-mode) .btn-danger { color: #ef4444 !important; }
.btn-outline-danger, .btn-outline-primary, .btn-outline-success, .btn-outline-warning { background: var(--neo-bg-2) !important; }

/* -----------------------------------------
   6. FORMS & INPUTS
   ----------------------------------------- */
input.form-control:not([type="file"]):not([type="checkbox"]):not([type="radio"]), select.form-control, .custom-select, .input-group-text {
  background: var(--neo-bg-2) !important; border: 0 !important; border-radius: 12px !important; color: var(--neo-text) !important;
  box-shadow: inset 3px 3px 6px var(--neo-shadow-dark), inset -3px -3px 6px var(--neo-shadow-light) !important;
  height: 38px !important; padding: 6px 12px !important; line-height: 1.5 !important;
}
textarea.form-control { background: var(--neo-bg-2) !important; border: 0 !important; border-radius: 12px !important; color: var(--neo-text) !important; box-shadow: inset 3px 3px 6px var(--neo-shadow-dark), inset -3px -3px 6px var(--neo-shadow-light) !important; min-height: 80px; }
.form-control:focus { box-shadow: inset 3px 3px 6px var(--neo-shadow-dark), inset -3px -3px 6px var(--neo-shadow-light), 0 0 0 3px rgba(79, 70, 229, .15) !important; }

/* -----------------------------------------
   7. SELECT2 CUSTOMIZATION
   ----------------------------------------- */
.select2-container--default .select2-selection--single, .select2-container--default .select2-selection--multiple {
  background: var(--neo-bg-2) !important; border: 0 !important; border-radius: 12px !important;
  box-shadow: inset 3px 3px 6px var(--neo-shadow-dark), inset -3px -3px 6px var(--neo-shadow-light) !important;
}
.select2-container--default .select2-selection--single .select2-selection__rendered { line-height: normal !important; padding: 0 !important; color: var(--neo-text) !important; width: 100%; font-size: 1rem !important; }
.select2-container--default .select2-selection--single .select2-selection__arrow { height: 38px !important; top: 0 !important; right: 10px !important; }
.select2-container--default .select2-selection--multiple { min-height: 38px !important; padding: 2px 6px !important; }
.select2-container--default .select2-selection--multiple .select2-selection__choice {
  background: var(--neo-bg) !important; border: 1px solid var(--neo-border) !important; border-radius: 8px !important; color: var(--neo-text) !important;
  box-shadow: 2px 2px 5px var(--neo-shadow-dark), -2px -2px 5px var(--neo-shadow-light) !important; padding: 4px 10px 4px 28px !important; position: relative; display: inline-flex; align-items: center; margin-top: 4px; margin-right: 4px;
}
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove { position: absolute !important; left: 0; top: 0; bottom: 0; width: 24px; display: flex; align-items: center; justify-content: center; border-right: 1px solid var(--neo-border) !important; color: var(--neo-text) !important; margin: 0 !important; padding: 0 !important; }
.select2-dropdown { background: var(--neo-bg-2) !important; border: 1px solid var(--neo-border) !important; border-radius: var(--neo-radius) !important; box-shadow: 8px 8px 18px var(--neo-shadow-dark), -8px -8px 18px var(--neo-shadow-light) !important; overflow: hidden; margin-top: 2px; z-index: 1060 !important; }
.select2-results__option { color: var(--neo-text) !important; padding: 8px 12px; }
.select2-container--default .select2-results__option[aria-selected=true] { background: var(--neo-bg) !important; }
.select2-container--default .select2-results__option--highlighted[aria-selected] { background: #3b82f6 !important; color: #fff !important; }

/* -----------------------------------------
   8. SYSTEM BUG FIXES
   ----------------------------------------- */
html { height: 100% !important; }
body.login-page { height: 100vh !important; align-items: center !important; }
body:not(.login-page) { height: auto !important; min-height: 100%; }
.wrapper { min-height: 100vh; overflow-x: visible !important; }
.sidebar-collapse .main-sidebar, .sidebar-collapse .main-sidebar:hover { z-index: 1050 !important; }

/* =========================================
   🛠️ แก้ปัญหา Textbox & Select ใน Dark Mode
   ========================================= */
input.form-control:-webkit-autofill, input.form-control:-webkit-autofill:hover, input.form-control:-webkit-autofill:focus, textarea.form-control:-webkit-autofill {
  -webkit-text-fill-color: var(--neo-text) !important; -webkit-box-shadow: 0 0 0px 1000px var(--neo-bg-2) inset !important; transition: background-color 5000s ease-in-out 0s;
}

body.dark-mode input.form-control:not([type="file"]):not([type="checkbox"]):not([type="radio"]), body.dark-mode select.form-control, body.dark-mode .custom-select, body.dark-mode textarea.form-control {
  background: var(--neo-bg-2) !important; color: var(--neo-text) !important;
  box-shadow: inset 3px 3px 6px rgba(0, 0, 0, 0.4), inset -3px -3px 6px rgba(255, 255, 255, 0.02) !important;
}

body.dark-mode input.form-control[readonly], body.dark-mode input.form-control:disabled, body.dark-mode textarea.form-control[readonly], body.dark-mode textarea.form-control:disabled {
  background: var(--neo-bg) !important; box-shadow: inset 2px 2px 5px rgba(0, 0, 0, 0.4) !important; color: var(--neo-muted) !important; opacity: 0.8;
}

body.dark-mode .select2-container--default .select2-selection--single, body.dark-mode .select2-container--default .select2-selection--multiple, body.dark-mode .select2-dropdown {
  background: var(--neo-bg-2) !important; border-color: rgba(255, 255, 255, 0.05) !important; box-shadow: inset 3px 3px 6px rgba(0, 0, 0, 0.4), inset -3px -3px 6px rgba(255, 255, 255, 0.02) !important;
}
body.dark-mode .select2-container--default .select2-selection--multiple .select2-selection__choice { background: var(--neo-bg) !important; border-color: rgba(255, 255, 255, 0.05) !important; }

/* =========================================
   🛠️ แก้ปัญหาสี Badge อ่านยากใน Dark Mode
   ========================================= */
body.dark-mode .badge-success { background-color: rgba(40, 167, 69, 0.15) !important; color: #4ade80 !important; border: 1px solid rgba(74, 222, 128, 0.3); }
body.dark-mode .badge-warning { background-color: rgba(255, 193, 7, 0.15) !important; color: #fde047 !important; border: 1px solid rgba(253, 224, 71, 0.3); }
body.dark-mode .badge-danger { background-color: rgba(220, 53, 69, 0.15) !important; color: #f87171 !important; border: 1px solid rgba(248, 113, 113, 0.3); }
body.dark-mode .badge-info { background-color: rgba(23, 162, 184, 0.15) !important; color: #38bdf8 !important; border: 1px solid rgba(56, 189, 248, 0.3); }
body.dark-mode .badge-primary { background-color: rgba(0, 123, 255, 0.15) !important; color: #60a5fa !important; border: 1px solid rgba(96, 165, 250, 0.3); }
body.dark-mode .badge.text-dark { color: inherit !important; }

/* =========================================
   🛠️ แก้ปัญหาแถวสรุปยอด (Summary Row)
   ========================================= */
.row-major-sum { background-color: #f8f9fa !important; }
.sum-major-amount { font-size: 1.15em; border-bottom: 2px solid #007bff !important; }
.row-grand-sum { background-color: #eef9f0 !important; }
.summary-label { font-size: 1.2em; }
.sum-grand-amount { font-size: 1.3em; border-bottom: 4px double #28a745 !important; }

body.dark-mode .row-major-sum, body.dark-mode .row-grand-sum { background-color: rgba(255, 255, 255, 0.05) !important; }
body.dark-mode .row-major-sum td, body.dark-mode .row-grand-sum td { color: #f8fafc !important; }
body.dark-mode .sum-major-amount { color: #60a5fa !important; border-bottom: 2px solid #3b82f6 !important; }
body.dark-mode .sum-grand-amount { color: #4ade80 !important; border-bottom: 4px double #22c55e !important; }

/* =========================================
   🛠️ แก้ปัญหาปุ่ม Active
   ========================================= */
body:not(.dark-mode) .btn.active, body:not(.dark-mode) .btn:active, body:not(.dark-mode) label.btn.active, body:not(.dark-mode) .btn-group .btn.active {
  background: #3b82f6 !important; color: #ffffff !important; border-color: #2563eb !important; box-shadow: inset 3px 3px 6px rgba(0, 0, 0, 0.2) !important; font-weight: 600 !important;
}
body:not(.dark-mode) .btn.active i, body:not(.dark-mode) .btn.active .fas { color: #ffffff !important; }

body.dark-mode .btn.active, body.dark-mode .btn:active, body.dark-mode label.btn.active, body.dark-mode .btn-group .btn.active {
  background: #4f46e5 !important; color: #ffffff !important; border-color: #4338ca !important; box-shadow: inset 3px 3px 6px rgba(0, 0, 0, 0.4) !important; font-weight: 600 !important;
}
body.dark-mode .btn.active i, body.dark-mode .btn.active .fas { color: #ffffff !important; }

/* =========================================
   🛠️ แก้ปัญหา UI เมนูลูกเลเวล 2 (Sub-sub-menu Depth)
   ========================================= */
/* จับเป้าหมายเฉพาะเมนูที่ซ้อนอยู่ในเมนูลูกอีกที */
.nav-sidebar .nav-treeview .nav-treeview {
    /* ถอด margin ออกเพื่อให้กว้างเสมอกับเลเวล 1 และใช้ border-radius เข้ากับกล่อง */
    border-radius: 0 0 12px 12px !important;
    
    /* โหมดสว่าง: ปรับสีและเงาให้ดูยุบตัวลึกลงไปนิดหน่อย */
    background-color: rgba(0, 0, 0, 0.03) !important; 
    box-shadow: inset 3px 3px 6px rgba(0, 0, 0, 0.05) !important;
}

/* โหมดมืด: ทำให้เมนูเลเวล 2 ดำมืดลงไปอีกระดับ */
body.dark-mode .nav-sidebar .nav-treeview .nav-treeview {
    background-color: rgba(0, 0, 0, 0.35) !important; 
    
    /* เพิ่มเงาดำด้านบนซ้าย ให้ความรู้สึกเป็นหลุมที่ลึกที่สุด */
    box-shadow: inset 4px 4px 10px rgba(0, 0, 0, 0.7),
                inset -1px -1px 3px rgba(255, 255, 255, 0.01) !important;
                
    /* เติมเส้นขอบซ้ายสีจางๆ เพื่อช่วยนำสายตาแทนการเยื้อง */
    border-left: 2px solid var(--neo-border) !important;
}
/* =========================================
   🛠️ แก้ปัญหาสีเมนูหลัก (Level 1) สถานะ Active ในโหมดมืด
   ========================================= */
/* 1. ปรับสีพื้นหลังของเมนูที่ถูกกด (Active / Menu Open) ให้เป็นสีหลุมของธีมมืด */
body.dark-mode .nav-sidebar .nav-item > .nav-link.active,
body.dark-mode .nav-sidebar .nav-item.menu-open > .nav-link.active {
    background-color: var(--neo-bg-2) !important;
    color: var(--neo-text) !important;
    /* สร้างมิติแบบหลุม (Inset) ให้รู้ว่าเมนูนี้กำลังถูกเลือกอยู่ */
    box-shadow: inset 3px 3px 6px rgba(0, 0, 0, 0.4), 
                inset -3px -3px 6px rgba(255, 255, 255, 0.02) !important;
}

/* 2. บังคับสีไอคอนหน้าเมนู และลูกศรด้านหลัง (Arrow) ให้สว่างตัดกับพื้นหลังเสมอ */
body.dark-mode .nav-sidebar .nav-item > .nav-link.active .nav-icon,
body.dark-mode .nav-sidebar .nav-item > .nav-link.active p i.right {
    color: var(--neo-text) !important;
    opacity: 1 !important;
}