/* ============================================================
   THEME SWITCHER — ธีมสว่าง = ดีไซน์เดิมของระบบ (ไม่ override ใด ๆ)
   ธีมมืด = body.theme-dark (สลับด้วยปุ่มบน navbar, จำค่าใน localStorage)
   ============================================================ */

/* ---------- ปุ่มสลับธีม ---------- */
.theme-toggle {
    background: #f1f5f9;
    border: 1px solid #cbd5e1;
    color: #334155;
    border-radius: 20px;
    padding: 7px 14px;
    font-size: 12.5px;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.2s ease;
}
.theme-toggle:hover {
    background: #e2e8f0;
}
body.theme-dark .theme-toggle {
    background: #1e293b;
    border-color: #38507a;
    color: #cbd5e1;
}
body.theme-dark .theme-toggle:hover {
    background: #27354a;
}

/* ============================================================
   DARK THEME (body.theme-dark) — โทนน้ำเงินเข้ม slate ตามสีเดิมของระบบ
   ============================================================ */

/* ---------- พื้นหลังหลัก ---------- */
body.theme-dark {
    background-color: #0b1220 !important;
    background-image: radial-gradient(circle at 0% 0%, rgba(79, 70, 229, 0.07) 0%, transparent 40%),
                      radial-gradient(circle at 100% 100%, rgba(99, 102, 241, 0.05) 0%, transparent 40%) !important;
    color: #d3ddeb !important;
}
body.theme-dark .content-area {
    background-color: transparent !important;
}
body.theme-dark ::selection {
    background: #3730a3;
    color: #e0e7ff;
}

/* ---------- ตัวอักษรทั่วไป ---------- */
body.theme-dark h1, body.theme-dark h2, body.theme-dark h3,
body.theme-dark h4, body.theme-dark h5 {
    color: #e8effa !important;
}
body.theme-dark p {
    color: #9fb0c5 !important;
}
body.theme-dark label {
    color: #b3c2d6 !important;
}

/* ---------- Navbar ---------- */
body.theme-dark .navbar,
body.theme-dark .admin-navbar {
    background: rgba(13, 20, 34, 0.92) !important;
    border-bottom: 1px solid #223047 !important;
    box-shadow: 0 1px 0 rgba(99, 102, 241, 0.15) !important;
}
body.theme-dark .navbar-title {
    color: #e8effa !important;
}
body.theme-dark .user-tag {
    background: #16233a !important;
    border-color: #2b3f5f !important;
    color: #9db3d0 !important;
}
body.theme-dark .user-tag strong {
    color: #e8effa !important;
}
body.theme-dark .btn-admin-console {
    background-color: #4338ca !important;
    border-color: #3730a3 !important;
}
body.theme-dark .btn-admin-console:hover {
    background-color: #4f46e5 !important;
}

/* ---------- Sidebar (เข้มลงอีกขั้นจากเดิม) ---------- */
body.theme-dark .sidebar,
body.theme-dark .admin-sidebar {
    background: linear-gradient(180deg, #060b16 0%, #0f172a 100%) !important;
}

/* ---------- แบนเนอร์ต้อนรับ ---------- */
body.theme-dark .welcome-banner {
    background: linear-gradient(135deg, #0f172a 0%, #3730a3 60%, #0d9488 100%) !important;
}

/* ---------- การ์ด/กล่อง/แผงต่าง ๆ ---------- */
body.theme-dark .datatable-wrapper,
body.theme-dark .main-search-panel,
body.theme-dark .analytics-card,
body.theme-dark .metric-card,
body.theme-dark .nsw-card-stat,
body.theme-dark .denied-card {
    background: #111a2c !important;
    border-color: #223047 !important;
    color: #d3ddeb !important;
    box-shadow: 0 6px 16px -6px rgba(0, 0, 0, 0.5) !important;
}

/* กล่อง/แผงที่ฝังสีพื้นขาว-เทาอ่อนไว้ inline ในโค้ด */
body.theme-dark .content-area div[style*="background:#fff"],
body.theme-dark .content-area div[style*="background: #fff"],
body.theme-dark .content-area div[style*="background:#ffffff"],
body.theme-dark .content-area div[style*="background: #ffffff"],
body.theme-dark .content-area div[style*="background:#f8fafc"],
body.theme-dark .content-area div[style*="background: #f8fafc"] {
    background: #111a2c !important;
    border-color: #223047 !important;
}
body.theme-dark .content-area span[style*="color:#475569"],
body.theme-dark .content-area label[style*="color:#475569"],
body.theme-dark .content-area span[style*="color:#64748b"],
body.theme-dark .content-area label[style*="color:#64748b"],
body.theme-dark .content-area span[style*="color:#334155"],
body.theme-dark .content-area label[style*="color:#334155"] {
    color: #a8bad2 !important;
}
body.theme-dark .content-area h3[style*="color:#3730a3"],
body.theme-dark .content-area h4[style*="color:#3730a3"],
body.theme-dark .content-area span[style*="color:#3730a3"] {
    color: #7fb0ff !important;
}

/* ---------- ตาราง ---------- */
body.theme-dark .nsw-table-container {
    background: #111a2c !important;
    border-color: #223047 !important;
}
body.theme-dark .nsw-table th,
body.theme-dark .datatable-table th,
body.theme-dark .consult-table th,
body.theme-dark .fore-table th {
    background: #16233a !important;   /* ทับสีคอลัมน์พิเศษด้วย เพื่อให้อ่านออกบนพื้นมืด */
    color: #9cc0f5 !important;
    border-bottom: 2px solid #4f46e5 !important;
}
body.theme-dark .nsw-table td,
body.theme-dark .datatable-table td,
body.theme-dark .consult-table td,
body.theme-dark .fore-table td {
    background: transparent !important; /* ล้างสีพื้น inline ของคอลัมน์พิเศษ */
    color: #cdd9e8 !important;
    border-bottom: 1px solid #1d2a41 !important;
}
body.theme-dark .nsw-table tr:hover,
body.theme-dark .datatable-table tbody tr:hover,
body.theme-dark .consult-table tr:hover,
body.theme-dark .fore-table tr:hover {
    background-color: #17233a !important;
}
body.theme-dark .canceled-row td {
    background-color: rgba(153, 27, 27, 0.14) !important;
    color: #e08b84 !important;
    border-bottom: 1px solid rgba(153, 27, 27, 0.3) !important;
}

/* ---------- ช่องกรอกข้อมูลทุกชนิด ---------- */
body.theme-dark input:not([type="checkbox"]):not([type="radio"]),
body.theme-dark select,
body.theme-dark textarea {
    background-color: #16233a !important;
    color: #dbe6f3 !important;
    border-color: #35496b !important;
}
body.theme-dark input::placeholder,
body.theme-dark textarea::placeholder {
    color: #6a7d99 !important;
}
body.theme-dark input:disabled,
body.theme-dark select:disabled,
body.theme-dark textarea:disabled {
    background-color: #101a2c !important;
    color: #5b6c85 !important;
}
body.theme-dark input:focus,
body.theme-dark select:focus,
body.theme-dark textarea:focus {
    border-color: #6366f1 !important;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.2) !important;
}

/* ---------- Modal ---------- */
body.theme-dark .poa-modal-overlay {
    background: rgba(0, 0, 0, 0.65) !important;
}
body.theme-dark .poa-modal-card,
body.theme-dark .modal-card {
    background: #121c30 !important;
    color: #d3ddeb !important;
}
body.theme-dark .poa-modal-footer,
body.theme-dark .modal-footer {
    background: #0d1526 !important;
    border-top: 1px solid #223047 !important;
}
body.theme-dark .poa-modal-header h3 {
    color: #7fb0ff !important;
}

/* ---------- Dropdown เลือกคอลัมน์ / กล่องลอยต่าง ๆ ---------- */
body.theme-dark #col-visibility-dropdown {
    background: #121c30 !important;
    border-color: #2b3f5f !important;
}
body.theme-dark #col-visibility-dropdown label,
body.theme-dark #col-visibility-dropdown h5 {
    color: #b3c2d6 !important;
}

/* ---------- Scrollbar ---------- */
body.theme-dark ::-webkit-scrollbar-thumb {
    background: #2b3f5f !important;
}
body.theme-dark ::-webkit-scrollbar-thumb:hover {
    background: #3a5380 !important;
}

/* ---------- หน้า Login / Signup ---------- */
body.theme-dark .glass-card {
    background: rgba(17, 26, 44, 0.92) !important;
    border-color: #223047 !important;
    color: #d3ddeb !important;
}

/* ---------- เคารพผู้ใช้ที่ปิด animation ในเครื่อง ---------- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}

/* ธีมมืด: พื้นคอลัมน์การจัดการที่ถูกตรึงไว้ขวาสุด ต้องทึบเพื่อบังเนื้อหาที่เลื่อนอยู่ข้างหลัง */
body.theme-dark .nsw-table th:last-child, body.theme-dark .oth-table th:last-child,
body.theme-dark .fore-table th:last-child, body.theme-dark .consult-table th:last-child {
    background: #16233a !important;
}
body.theme-dark .nsw-table td:last-child, body.theme-dark .oth-table td:last-child,
body.theme-dark .fore-table td:last-child, body.theme-dark .consult-table td:last-child {
    background: #111a2c !important;
    box-shadow: -4px 0 8px rgba(0, 0, 0, 0.4);
}

/* ธีมมืด: พื้น 2 คอลัมน์แรกที่ตรึงไว้ของตาราง NSW */
body.theme-dark .nsw-table td:nth-child(-n+2) {
    background: #111a2c !important;
}
body.theme-dark .nsw-table th:nth-child(-n+2) {
    background: #16233a !important;
}
body.theme-dark .nsw-table tr:hover td:nth-child(-n+2) {
    background: #17233a !important;
}
body.theme-dark .canceled-row td:nth-child(-n+2) {
    background: #2a1520 !important;
}

/* ============================================================
   Loading Overlay สวยงาม (สร้างโดย js/theme.js)
   ============================================================ */
#app-loading-overlay {
    position: fixed;
    inset: 0;
    z-index: 100000;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(15, 23, 42, 0.45);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.22s ease;
}
#app-loading-overlay.show {
    opacity: 1;
    pointer-events: auto;
}
.app-loading-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
    padding: 30px 40px 26px;
    background: #ffffff;
    border-radius: 18px;
    box-shadow: 0 25px 60px -15px rgba(15, 23, 42, 0.5);
    transform: scale(0.9) translateY(8px);
    transition: transform 0.28s cubic-bezier(0.34, 1.56, 0.64, 1);
}
#app-loading-overlay.show .app-loading-box {
    transform: scale(1) translateY(0);
}
/* สปินเนอร์ 3 วงหมุนไล่กัน */
.app-loading-spinner {
    position: relative;
    width: 62px;
    height: 62px;
}
.app-loading-spinner span {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 3px solid transparent;
    animation: appSpin 1.1s cubic-bezier(0.5, 0, 0.5, 1) infinite;
}
.app-loading-spinner span:nth-child(1) {
    border-top-color: #4f46e5;
}
.app-loading-spinner span:nth-child(2) {
    inset: 9px;
    border-top-color: #14b8a6;
    animation-duration: 0.85s;
    animation-direction: reverse;
}
.app-loading-spinner span:nth-child(3) {
    inset: 18px;
    border-top-color: #a78bfa;
    animation-duration: 1.4s;
}
@keyframes appSpin {
    to { transform: rotate(360deg); }
}
.app-loading-text {
    font-size: 14px;
    font-weight: 700;
    color: #3730a3;
    letter-spacing: 0.3px;
    font-family: inherit;
}
/* แถบวิ่งไล่สีด้านล่าง */
.app-loading-bar {
    width: 150px;
    height: 4px;
    border-radius: 99px;
    background: #e2e8f0;
    overflow: hidden;
    position: relative;
}
.app-loading-bar i {
    position: absolute;
    left: -40%;
    top: 0;
    height: 100%;
    width: 40%;
    border-radius: 99px;
    background: linear-gradient(90deg, #4f46e5, #14b8a6);
    animation: appBar 1.15s ease-in-out infinite;
}
@keyframes appBar {
    0% { left: -40%; }
    100% { left: 100%; }
}
/* ธีมมืด */
body.theme-dark .app-loading-box {
    background: #10162a;
    box-shadow: 0 25px 60px -15px rgba(0, 0, 0, 0.7);
}
body.theme-dark .app-loading-text {
    color: #8fa5ff;
}
body.theme-dark .app-loading-bar {
    background: #232b45;
}
@media (prefers-reduced-motion: reduce) {
    .app-loading-spinner span, .app-loading-bar i { animation-duration: 0.01ms !important; }
}

/* ============================================================
   กล่องแจ้งเตือนสวยงามแทน alert() (สร้างโดย js/theme.js)
   ============================================================ */
#app-alert-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 99999;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.18s ease;
}
#app-alert-overlay.show {
    opacity: 1;
    pointer-events: auto;
}
.app-alert-card {
    background: #ffffff;
    border-radius: 16px;
    padding: 28px 32px 24px;
    max-width: 420px;
    width: 90%;
    text-align: center;
    box-shadow: 0 25px 50px -12px rgba(15, 23, 42, 0.35);
    transform: scale(0.92) translateY(10px);
    transition: transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1);
    border-top: 5px solid #4f46e5;
}
#app-alert-overlay.show .app-alert-card {
    transform: scale(1) translateY(0);
}
.app-alert-card.tone-error   { border-top-color: #dc2626; }
.app-alert-card.tone-success { border-top-color: #16a34a; }
.app-alert-card.tone-warn    { border-top-color: #f59e0b; }
.app-alert-icon {
    font-size: 40px;
    line-height: 1;
    margin-bottom: 12px;
}
.app-alert-msg {
    font-size: 14.5px;
    color: #334155;
    line-height: 1.65;
    white-space: pre-line;
    margin-bottom: 20px;
    font-weight: 500;
}
.app-alert-btn {
    background: #3730a3;
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 10px 36px;
    font-size: 14px;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    transition: all 0.15s ease;
}
.app-alert-btn:hover {
    background: #4338ca;
}
.tone-error .app-alert-btn   { background: #dc2626; }
.tone-error .app-alert-btn:hover   { background: #b91c1c; }
.tone-success .app-alert-btn { background: #16a34a; }
.tone-success .app-alert-btn:hover { background: #15803d; }
.tone-warn .app-alert-btn    { background: #d97706; }
.tone-warn .app-alert-btn:hover    { background: #b45309; }

/* ธีมมืด */
body.theme-dark .app-alert-card {
    background: #121c30;
}
body.theme-dark .app-alert-msg {
    color: #cdd9e8;
}

/* กล่องยืนยัน / กล่องกรอกเหตุผล (สร้างโดย js/theme.js) */
#app-confirm-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 99999;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.18s ease;
}
#app-confirm-overlay.show {
    opacity: 1;
    pointer-events: auto;
}
#app-confirm-overlay .app-alert-card {
    transform: scale(0.92) translateY(10px);
}
#app-confirm-overlay.show .app-alert-card {
    transform: scale(1) translateY(0);
}
.app-confirm-actions {
    display: flex;
    justify-content: center;
    gap: 10px;
}
.app-confirm-cancel {
    background: #ffffff;
    color: #64748b;
    border: 1.5px solid #cbd5e1;
    border-radius: 8px;
    padding: 10px 28px;
    font-size: 14px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: all 0.15s ease;
}
.app-confirm-cancel:hover {
    background: #f1f5f9;
    color: #334155;
}
.app-confirm-input {
    width: 100%;
    border: 1.5px solid #cbd5e1;
    border-radius: 10px;
    padding: 10px 14px;
    font-size: 14px;
    font-family: inherit;
    color: #334155;
    margin-bottom: 18px;
    resize: vertical;
    outline: none;
    box-sizing: border-box;
}
.app-confirm-input:focus {
    border-color: #4f46e5;
    box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.12);
}
body.theme-dark .app-confirm-cancel {
    background: #16233a;
    border-color: #35496b;
    color: #9db3d0;
}
body.theme-dark .app-confirm-input {
    background: #16233a;
    border-color: #35496b;
    color: #dbe6f3;
}

/* ---------- งานด่วน (ธีมมืด) ---------- */
/* ต้องเขียนที่ไฟล์นี้ เพราะ theme.css โหลดหลัง app.css และล้างสีพื้น td ของธีมมืดไว้ */
body.theme-dark .nsw-urgent-row td {
    background-color: rgba(249, 115, 22, 0.12) !important;
    border-bottom: 1px solid rgba(249, 115, 22, 0.28) !important;
}
body.theme-dark .nsw-urgent-row td:first-child {
    box-shadow: inset 4px 0 0 0 #fb923c;
}
body.theme-dark .nsw-urgent-badge {
    background: rgba(249, 115, 22, 0.25);
    color: #fdba74;
}
body.theme-dark .nsw-urgent-toggle {
    background: rgba(249, 115, 22, 0.10);
    border-color: rgba(249, 115, 22, 0.35);
    color: #fdba74;
}
body.theme-dark .nsw-urgent-toggle:hover {
    background: rgba(249, 115, 22, 0.18);
    border-color: rgba(249, 115, 22, 0.55);
}