/* ===================================================================
DARK MODE THEME (toggle via )
Alias supported:
This file overrides the light theme without modifying your base CSS.
=================================================================== */
/* Root */
html.bootstrap-dark body,
html.bootstrap-dark, html.boostrap-dark {
color: #e6e6e6;
background-color: #1f1f1f;
}
/* -----------------------------
Layout scaffolding & containers
----------------------------- */
html.bootstrap-dark #opdce_body,
html.boostrap-dark #opdce_body {
background-color: transparent;
color: inherit;
}
html.bootstrap-dark #opdce_container,
html.boostrap-dark #opdce_container {
background-color: transparent;
}
/* -----------------------------
Typography & basic links
----------------------------- */
html.bootstrap-dark,
html.boostrap-dark {
--dm-text: #e6e6e6;
--dm-text-muted: #c8c8c8;
--dm-bg: #1f1f1f;
--dm-bg-2: #232323;
--dm-bg-3: #2b2b2b;
--dm-elev-1: #2a2a2a;
--dm-elev-2: #303030;
--dm-elev-3: #3a3a3a;
--dm-border: #444;
--dm-accent: #99defc;
--dm-primary: #20a5de;
--dm-primary-deep: #1e396c;
--dm-link: #eaeaea;
}
html.bootstrap-dark a,
html.boostrap-dark a {
color: var(--dm-link);
text-decoration: none;
}
html.bootstrap-dark a:hover,
html.boostrap-dark a:hover {
color: #ffffff;
text-decoration: underline;
}
html.bootstrap-dark .navbar-brand,
html.boostrap-dark .navbar-brand {
color: #ffffff;
}
/* ======================================================
DARK MODE NAV-TABS PATCH
====================================================== */
html.bootstrap-dark .nav-tabs .nav-link,
html.boostrap-dark .nav-tabs .nav-link {
color: #dcdcdc !important;
background-color: transparent !important;
border: 1px solid transparent;
}
html.bootstrap-dark .nav-tabs .nav-link:hover,
html.boostrap-dark .nav-tabs .nav-link:hover {
color: #ffffff !important;
background-color: #2f2f2f !important;
border-color: #444 #444 #2f2f2f;
}
html.bootstrap-dark .nav-tabs .nav-link.active,
html.boostrap-dark .nav-tabs .nav-link.active,
html.bootstrap-dark .nav-tabs .nav-item.show .nav-link,
html.boostrap-dark .nav-tabs .nav-item.show .nav-link {
color: #ffffff !important;
background-color: #3a3a3a !important;
border-color: #555 #555 #3a3a3a;
}
html.bootstrap-dark .nav-tabs,
html.boostrap-dark .nav-tabs {
border-bottom: 1px solid #555 !important;
}
/* Headings alignment retained */
html.bootstrap-dark h3, html.bootstrap-dark .h3,
html.boostrap-dark h3, html.boostrap-dark .h3 {
color: var(--dm-text);
}
/* Required/star marks */
html.bootstrap-dark span.required:after,
html.bootstrap-dark label.required:after,
html.boostrap-dark span.required:after,
html.boostrap-dark label.required:after {
color: #ffb066;
}
/* Validation labels */
html.bootstrap-dark label.error,
html.boostrap-dark label.error {
background: #3a0000;
color: #ffd8d8;
border-color: #aa3333;
}
/* Badges */
/* html.bootstrap-dark .badge_warning,
html.boostrap-dark .badge_warning {
background-color: #ff4d4d;
color: #fff;
} */
/* PRIMARY */
html.bootstrap-dark .badge_primary,
html.boostrap-dark .badge_primary,
html.bootstrap-dark .badge-primary,
html.boostrap-dark .badge-primary,
html.bootstrap-dark .badge.bg-primary,
html.boostrap-dark .badge.bg-primary {
background-color: #2b6cb0!important;
color: #e6f2ff!important;
}
/* SECONDARY */
html.bootstrap-dark .badge_secondary,
html.boostrap-dark .badge_secondary,
html.bootstrap-dark .badge-secondary,
html.boostrap-dark .badge-secondary,
html.bootstrap-dark .badge.bg-secondary,
html.boostrap-dark .badge.bg-secondary {
background-color: #2f3b52!important;
color: #e6e6e6!important;
}
/* SUCCESS */
html.bootstrap-dark .badge_success,
html.boostrap-dark .badge_success,
html.bootstrap-dark .badge-success,
html.boostrap-dark .badge-success,
html.bootstrap-dark .badge.bg-success,
html.boostrap-dark .badge.bg-success {
background-color: #2f855a!important;
color: #e7fff3!important;
}
/* INFO */
html.bootstrap-dark .badge_info,
html.boostrap-dark .badge_info,
html.bootstrap-dark .badge-info,
html.boostrap-dark .badge-info,
html.bootstrap-dark .badge.bg-info,
html.boostrap-dark .badge.bg-info {
background-color: #2b6d7f!important;
color: #e6fbff!important;
}
/* WARNING */
html.bootstrap-dark .badge_warning,
html.boostrap-dark .badge_warning,
html.bootstrap-dark .badge-warning,
html.boostrap-dark .badge-warning,
html.bootstrap-dark .badge.bg-warning,
html.boostrap-dark .badge.bg-warning {
background-color: #8a6d00!important;
color: #fff7d6!important;
}
/* DANGER */
html.bootstrap-dark .badge_danger,
html.boostrap-dark .badge_danger,
html.bootstrap-dark .badge-danger,
html.boostrap-dark .badge-danger,
html.bootstrap-dark .badge.bg-danger,
html.boostrap-dark .badge.bg-danger {
background-color: #b7323a!important;
color: #ffeef0!important;
}
/* LIGHT */
html.bootstrap-dark .badge_light,
html.boostrap-dark .badge_light,
html.bootstrap-dark .badge-light,
html.boostrap-dark .badge-light,
html.bootstrap-dark .badge.bg-light,
html.boostrap-dark .badge.bg-light {
background-color: #2a2a2a!important;
color: #f2f2f2!important;
}
/* DARK */
html.bootstrap-dark .badge_dark,
html.boostrap-dark .badge_dark,
html.bootstrap-dark .badge-dark,
html.boostrap-dark .badge-dark,
html.bootstrap-dark .badge.bg-dark,
html.boostrap-dark .badge.bg-dark {
background-color: #121212!important;
color: #d7d7d7!important;
}
/* ลิงก์/ไอคอนภายใน badge ให้สืบสีตามตัวอักษร */
html.bootstrap-dark .badge a,
html.boostrap-dark .badge a,
html.bootstrap-dark .badge [class^="fa-"],
html.boostrap-dark .badge [class^="fa-"] {
color: inherit!important;
}
/* -----------------------------
Navbar / Header
----------------------------- */
html.bootstrap-dark nav.cusnav-header,
html.boostrap-dark nav.cusnav-header,
html.bootstrap-dark .navbar-style,
html.boostrap-dark .navbar-style {
background-color: #2b2b2b !important;
color: var(--dm-text) !important;
box-shadow: 0 1px 2px rgba(0,0,0,.6);
}
html.bootstrap-dark .navbar-style .navbar-brand,
html.bootstrap-dark .navbar-style .btn-link,
html.boostrap-dark .navbar-style .navbar-brand,
html.boostrap-dark .navbar-style .btn-link {
color: #ffffff !important;
}
/* -----------------------------
Sidebar
----------------------------- */
html.bootstrap-dark #cusnav-sidebar,
html.boostrap-dark #cusnav-sidebar,
html.bootstrap-dark .sidebar,
html.boostrap-dark .sidebar {
background-color: var(--dm-bg-3) !important;
color: var(--dm-text);
}
html.bootstrap-dark .sidebar a,
html.boostrap-dark .sidebar a,
html.bootstrap-dark .sidebar a.nav-link,
html.boostrap-dark .sidebar a.nav-link {
border-bottom-color: transparent !important; /* no border */
}
html.bootstrap-dark .sidebar a.active,
html.boostrap-dark .sidebar a.active,
html.bootstrap-dark .side-menu .nav-item a.active,
html.boostrap-dark .side-menu .nav-item a.active {
color: #ffffff !important;
background-color: #343434 !important;
border-color: transparent !important;
}
html.bootstrap-dark .side-menu .nav-item a.active,
html.boostrap-dark .side-menu .nav-item a.active {
/* preserve highlight feel */
color: #eaeaea !important;
background-color: rgba(54,153,255,0.16) !important;
}
/* Main menu / float menu */
html.bootstrap-dark .main-menu,
html.boostrap-dark .main-menu {
background-color: var(--dm-bg-3);
}
html.bootstrap-dark .main-menu-header,
html.boostrap-dark .main-menu-header {
color: var(--dm-text-muted);
}
html.bootstrap-dark .main-menu-body,
html.boostrap-dark .main-menu-body {
background-color: var(--dm-bg-3);
}
html.bootstrap-dark .main-menu-footer a,
html.boostrap-dark .main-menu-footer a {
color: var(--dm-link);
}
/* Breadcrumb */
html.bootstrap-dark #opdce_breadcrumb,
html.boostrap-dark #opdce_breadcrumb {
background-color: transparent;
border-color: var(--dm-elev-1) !important;
}
html.bootstrap-dark .breadcrumb,
html.boostrap-dark .breadcrumb,
html.bootstrap-dark ol.breadcrumb,
html.boostrap-dark ol.breadcrumb {
background-color: var(--dm-elev-2) !important;
color: var(--dm-text) !important;
}
html.bootstrap-dark .breadcrumb a,
html.boostrap-dark .breadcrumb a,
html.bootstrap-dark .breadcrumb-item a,
html.boostrap-dark .breadcrumb-item a {
color: #ffffff !important;
}
/* ======================================================
DARK MODE: List Group
====================================================== */
html.bootstrap-dark .list-group,
html.boostrap-dark .list-group {
background-color: transparent !important;
}
html.bootstrap-dark .list-group-item,
html.boostrap-dark .list-group-item {
background-color: #2a2a2a !important;
color: #e6e6e6 !important;
border: 1px solid #444 !important;
}
/* Hover / Focus */
html.bootstrap-dark .list-group-item:hover,
html.bootstrap-dark .list-group-item:focus,
html.boostrap-dark .list-group-item:hover,
html.boostrap-dark .list-group-item:focus {
background-color: #3a3a3a !important;
color: #ffffff !important;
}
/* Active item */
html.bootstrap-dark .list-group-item.active,
html.boostrap-dark .list-group-item.active {
background-color: #575757 !important;
border-color: #666 !important;
color: #ffffff !important;
font-weight: bold;
}
/* Disabled item */
html.bootstrap-dark .list-group-item.disabled,
html.boostrap-dark .list-group-item.disabled {
background-color: #1f1f1f !important;
color: #777 !important;
border-color: #333 !important;
}
/* ---------- Generic Bootstrap palette with hover ---------- */
html.bootstrap-dark .btn-primary,
html.boostrap-dark .btn-primary {
background-color:#0d6efd; border-color:#0d6efd; filter:brightness(.88);
}
html.bootstrap-dark .btn-primary:hover,
html.bootstrap-dark .btn-primary:focus,
html.bootstrap-dark .btn-primary:active,
html.boostrap-dark .btn-primary:hover,
html.boostrap-dark .btn-primary:focus,
html.boostrap-dark .btn-primary:active {
filter:brightness(1.05);
}
html.bootstrap-dark .btn-success,
html.boostrap-dark .btn-success { background-color:#198754; border-color:#198754; filter:brightness(.9); }
html.bootstrap-dark .btn-success:hover,
html.bootstrap-dark .btn-success:focus,
html.bootstrap-dark .btn-success:active,
html.boostrap-dark .btn-success:hover,
html.boostrap-dark .btn-success:focus,
html.boostrap-dark .btn-success:active {
filter:brightness(1.1);
}
/* html.bootstrap-dark .btn-info,
html.boostrap-dark .btn-info { background-color:#0dcaf0; border-color:#0dcaf0; filter:brightness(.85); color:#0b0b0b; }
html.bootstrap-dark .btn-info:hover,
html.bootstrap-dark .btn-info:focus,
html.bootstrap-dark .btn-info:active,
html.boostrap-dark .btn-info:hover,
html.boostrap-dark .btn-info:focus,
html.boostrap-dark .btn-info:active {
filter:brightness(0.95);
} */
html.bootstrap-dark .btn-warning,
html.boostrap-dark .btn-warning { background-color:#ffc107; border-color:#ffc107; filter:brightness(.85); color:#0b0b0b; }
html.bootstrap-dark .btn-warning:hover,
html.bootstrap-dark .btn-warning:focus,
html.bootstrap-dark .btn-warning:active,
html.boostrap-dark .btn-warning:hover,
html.boostrap-dark .btn-warning:focus,
html.boostrap-dark .btn-warning:active {
filter:brightness(0.95);
}
html.bootstrap-dark .btn-danger,
html.boostrap-dark .btn-danger { background-color:#dc3545; border-color:#dc3545; filter:brightness(.9); }
html.bootstrap-dark .btn-danger:hover,
html.bootstrap-dark .btn-danger:focus,
html.bootstrap-dark .btn-danger:active,
html.boostrap-dark .btn-danger:hover,
html.boostrap-dark .btn-danger:focus,
html.boostrap-dark .btn-danger:active {
filter:brightness(1.05);
}
html.bootstrap-dark .btn-dark,
html.boostrap-dark .btn-dark { background-color:#343a40; border-color:#343a40; filter:brightness(.95); }
html.bootstrap-dark .btn-dark:hover,
html.bootstrap-dark .btn-dark:focus,
html.bootstrap-dark .btn-dark:active,
html.boostrap-dark .btn-dark:hover,
html.boostrap-dark .btn-dark:focus,
html.boostrap-dark .btn-dark:active {
filter:brightness(1.1);
}
/* html.bootstrap-dark .btn-light,
html.boostrap-dark .btn-light { background-color:#adb5bd; border-color:#adb5bd; filter:brightness(.8); color:#0b0b0b; }
html.bootstrap-dark .btn-light:hover,
html.bootstrap-dark .btn-light:focus,
html.bootstrap-dark .btn-light:active,
html.boostrap-dark .btn-light:hover,
html.boostrap-dark .btn-light:focus,
html.boostrap-dark .btn-light:active {
filter:brightness(0.95);
} */
/* Explicitly keep secondary the same */
html.bootstrap-dark .btn-secondary,
html.boostrap-dark .btn-secondary {
background-color: var(--bs-secondary-bg, #6c757d);
border-color: var(--bs-secondary-border-color, #6c757d);
color: var(--bs-secondary-color, #fff);
}
html.bootstrap-dark .btn-default,
html.boostrap-dark .btn-default {
background-color: var(--bs-secondary-bg, #6c757d) !important;
border-color: var(--bs-secondary-border-color, #6c757d) !important;
color: var(--bs-secondary-color, #fff) !important;
}
html.bootstrap-dark .btn-default:hover,
html.bootstrap-dark .btn-default:focus,
html.bootstrap-dark .btn-default:active,
html.boostrap-dark .btn-default:hover,
html.boostrap-dark .btn-default:focus,
html.boostrap-dark .btn-default:active {
background-color: #5a6268 !important; /* hover state ของ secondary */
border-color: #545b62 !important;
color: #fff !important;
}
html.bootstrap-dark .btn-light,
html.boostrap-dark .btn-light {
background-color: var(--bs-secondary-bg, #6c757d) !important;
border-color: var(--bs-secondary-border-color, #6c757d) !important;
color: var(--bs-secondary-color, #fff) !important;
}
/* ======================================================
DARK MODE: Light Variant Buttons (btn-light-*)
====================================================== */
/* Light Primary */
html.bootstrap-dark .btn-light-primary,
html.boostrap-dark .btn-light-primary {
background-color: rgba(13, 110, 253, 0.2) !important; /* ฟ้าเข้มขึ้น */
color: #99defc !important; /* ฟ้าอ่อน (อ่านง่ายบนพื้นเข้ม) */
border: none !important;
}
html.bootstrap-dark .btn-light-primary:hover,
html.boostrap-dark .btn-light-primary:hover {
background-color: rgba(13, 110, 253, 0.35) !important;
color: #c2ecff !important;
}
/* Light Success */
html.bootstrap-dark .btn-light-success,
html.boostrap-dark .btn-light-success {
background-color: rgba(25, 135, 84, 0.2) !important;
color: #4ade80 !important; /* เขียวมิ้นต์ */
border: none !important;
}
html.bootstrap-dark .btn-light-success:hover,
html.boostrap-dark .btn-light-success:hover {
background-color: rgba(25, 135, 84, 0.35) !important;
color: #7fffbf !important;
}
/* Light Warning */
html.bootstrap-dark .btn-light-warning,
html.boostrap-dark .btn-light-warning {
background-color: rgba(255, 193, 7, 0.2) !important;
color: #ffd54f !important;
border: none !important;
}
html.bootstrap-dark .btn-light-warning:hover,
html.boostrap-dark .btn-light-warning:hover {
background-color: rgba(255, 193, 7, 0.35) !important;
color: #ffe082 !important;
}
/* Light Danger */
html.bootstrap-dark .btn-light-danger,
html.boostrap-dark .btn-light-danger {
background-color: rgba(220, 53, 69, 0.2) !important;
color: #ff8a80 !important;
border: none !important;
}
html.bootstrap-dark .btn-light-danger:hover,
html.boostrap-dark .btn-light-danger:hover {
background-color: rgba(220, 53, 69, 0.35) !important;
color: #ffb4a9 !important;
}
/* Light Info */
html.bootstrap-dark .btn-light-info,
html.boostrap-dark .btn-light-info {
background-color: rgba(13, 202, 240, 0.2) !important;
color: #4dd0e1 !important;
border: none !important;
}
html.bootstrap-dark .btn-light-info:hover,
html.boostrap-dark .btn-light-info:hover {
background-color: rgba(13, 202, 240, 0.35) !important;
color: #80deea !important;
}
html.bootstrap-dark .btn-light:hover,
html.bootstrap-dark .btn-light:focus,
html.bootstrap-dark .btn-light:active,
html.boostrap-dark .btn-light:hover,
html.boostrap-dark .btn-light:focus,
html.boostrap-dark .btn-light:active {
background-color: #5a6268 !important; /* เหมือน hover ของ secondary */
border-color: #545b62 !important;
color: #fff !important;
}
/*
html.bootstrap-dark .btn-light,
html.boostrap-dark .btn-light {
background-color: #3a3a3a !important;
border: 1px solid #555 !important;
color: #f2f2f2 !important;
}
html.bootstrap-dark .btn-light:hover,
html.boostrap-dark .btn-light:hover {
background-color: #4a4a4a !important;
color: #fff !important;
} */
html.bootstrap-dark .btn.btn-text-primary,
html.boostrap-dark .btn.btn-text-primary {
color: #99defc !important; /* ฟ้าอ่อน */
background-color: transparent !important;
}
html.bootstrap-dark .btn.btn-text-primary:hover,
html.boostrap-dark .btn.btn-text-primary:hover {
color: #c2ecff !important; /* ฟ้าสว่างขึ้น */
background-color: rgba(153, 222, 252, 0.1) !important;
}
html.bootstrap-dark .btn.btn-hover-text-primary:hover,
html.boostrap-dark .btn.btn-hover-text-primary:hover {
color: #99defc !important;
}
/* ---------- Your custom buttons ---------- */
html.bootstrap-dark .b1,
html.boostrap-dark .b1 { background-color:#5b8086 !important; border-color:#5b8086 !important; color:#fff !important; }
html.bootstrap-dark .b1:hover,
html.bootstrap-dark .b1:focus,
html.bootstrap-dark .b1:active,
html.boostrap-dark .b1:hover,
html.boostrap-dark .b1:focus,
html.boostrap-dark .b1:active { filter:brightness(1.1); }
html.bootstrap-dark .btn.btn-cust-yellow,
html.boostrap-dark .btn.btn-cust-yellow { background-color:#e7e36d; border-color:#e7e36d; color:#111; }
html.bootstrap-dark .btn.btn-cust-yellow:hover,
html.bootstrap-dark .btn.btn-cust-yellow:focus,
html.bootstrap-dark .btn.btn-cust-yellow:active,
html.boostrap-dark .btn.btn-cust-yellow:hover,
html.boostrap-dark .btn.btn-cust-yellow:focus,
html.boostrap-dark .btn.btn-cust-yellow:active { filter:brightness(0.95); }
/* ---------- Outline variants ---------- */
html.bootstrap-dark .btn-outline-secondary,
html.boostrap-dark .btn-outline-secondary { background-color:transparent !important; color:#e6e6e6 !important; border-color:#7a7a7a !important; }
html.bootstrap-dark .btn-outline-secondary:hover,
html.bootstrap-dark .btn-outline-secondary:focus,
html.bootstrap-dark .btn-outline-secondary:active,
html.boostrap-dark .btn-outline-secondary:hover,
html.boostrap-dark .btn-outline-secondary:focus,
html.boostrap-dark .btn-outline-secondary:active { background-color:#7a7a7a !important; color:#fff !important; }
html.bootstrap-dark .b2,
html.boostrap-dark .b2 { background-color:transparent !important; color:#99defc !important; border:1px solid #99defc !important; }
html.bootstrap-dark .b2:hover,
html.bootstrap-dark .b2:focus,
html.bootstrap-dark .b2:active,
html.boostrap-dark .b2:hover,
html.boostrap-dark .b2:focus,
html.boostrap-dark .b2:active { background-color:#99defc !important; color:#0b0b0b !important; }
/* ---------- Links styled as .link ---------- */
html.bootstrap-dark .link,
html.boostrap-dark .link { color: var(--dm-accent) !important; }
html.bootstrap-dark .link:hover,
html.bootstrap-dark .link:focus,
html.bootstrap-dark .link:active,
html.boostrap-dark .link:hover,
html.boostrap-dark .link:focus,
html.boostrap-dark .link:active { color:#ffffff !important; text-decoration:underline; }
/* Hover / Focus / Active ให้เหมือนปุ่ม */
html.bootstrap-dark a.btn:hover,
html.bootstrap-dark a.btn:focus,
html.bootstrap-dark a.btn:active,
html.boostrap-dark a.btn:hover,
html.boostrap-dark a.btn:focus,
html.boostrap-dark a.btn:active {
filter: brightness(1.05);
text-decoration: none !important;
}
/* ======================================================
DARK MODE: btn-text-dark
====================================================== */
html.bootstrap-dark .btn.btn-text-dark,
html.boostrap-dark .btn.btn-text-dark {
color: #e6e6e6 !important;
background-color: transparent !important;
border: none !important;
}
html.bootstrap-dark .btn.btn-text-dark:hover,
html.bootstrap-dark .btn.btn-text-dark:focus,
html.bootstrap-dark .btn.btn-text-dark:active,
html.boostrap-dark .btn.btn-text-dark:hover,
html.boostrap-dark .btn.btn-text-dark:focus,
html.boostrap-dark .btn.btn-text-dark:active {
color: #ffffff !important;
background-color: rgba(255,255,255,0.1) !important;
}
html.bootstrap-dark .btn.btn-hover-transparent-black,
html.boostrap-dark .btn.btn-hover-transparent-black {
background-color: transparent !important;
color: #e6e6e6 !important;
}
html.bootstrap-dark .btn.btn-hover-transparent-black:hover,
html.bootstrap-dark .btn.btn-hover-transparent-black:focus,
html.bootstrap-dark .btn.btn-hover-transparent-black:active,
html.boostrap-dark .btn.btn-hover-transparent-black:hover,
html.boostrap-dark .btn.btn-hover-transparent-black:focus,
html.boostrap-dark .btn.btn-hover-transparent-black:active {
background-color: rgba(255, 255, 255, 0.1) !important;
color: #ffffff !important;
}
/* ดักปุ่มที่มี inline style */
/* html.bootstrap-dark button[style],
html.boostrap-dark button[style] {
background-color: #444 !important;
color: #fff !important;
border-color: #666 !important;
} */
/* hover/focus */
/* html.bootstrap-dark button[style]:hover,
html.boostrap-dark button[style]:hover {
background-color: #555 !important;
} */
/*
html.bootstrap-dark button[style]:active,
html.boostrap-dark button[style]:active {
background-color: #666 !important;
} */
/* -----------------------------
Cards & Surfaces
----------------------------- */
html.bootstrap-dark .card,
html.boostrap-dark .card {
background-color: var(--dm-elev-1) !important;
color: var(--dm-text) !important;
border-color: var(--dm-border) !important;
}
html.bootstrap-dark .card-header,
html.boostrap-dark .card-header {
background-color: var(--dm-elev-2) !important;
color: #ffffff !important;
border-bottom-color: var(--dm-border) !important;
}
html.bootstrap-dark .card-header .card-title,
html.boostrap-dark .card-header .card-title{
background-color: var(--dm-elev-2) !important;
color: #ffffff !important;
border-bottom-color: var(--dm-border) !important;
}
html.bootstrap-dark .card-body-color,
html.boostrap-dark .card-body-color,
html.bootstrap-dark .card-footer,
html.boostrap-dark .card-footer {
background-color: var(--dm-elev-2) !important;
color: var(--dm-text) !important;
}
html.bootstrap-dark .accordion.accordion-solid .card .card-body {
border: 1px solid var(--dm-border) !important;
}
/* Card Label Dark Mode */
html.bootstrap-dark .card-label,
html.boostrap-dark .card-label {
color: var(--dm-text, #e6e6e6) !important; /* ให้ใช้สี text หลักใน dark */
}
/* ถ้ามี background */
html.bootstrap-dark .card-label.bg-light,
html.boostrap-dark .card-label.bg-light {
background-color: #2b2b2b !important; /* ทำให้ bg-light ดูเข้มขึ้นใน dark */
color: #f1f1f1 !important;
}
html.bootstrap-dark .bg-yellow-folder {
background-color: #4A3F10; /* เหลืองเข้มแบบ low-contrast แต่อ่านได้ */
color: #F7E8A0; /* ตัวอักษรเหลืองอ่อนอ่านบนพื้นเข้ม */
border: 1px solid rgba(247,232,160,0.25);
}
html.bootstrap-dark .bg-cust-rblue2 {
background-color: #0F2740; /* น้ำเงินกรมท่าเข้ม */
color: #CFE4FF; /* ตัวอักษรฟ้าอ่อน */
border: 1px solid rgba(207,228,255,0.2);
}
/* ถ้าเป็น label ใน header */
html.bootstrap-dark .card-header .card-label,
html.boostrap-dark .card-header .card-label {
color: #ffffff !important;
font-weight: 600;
}
/* Header search boxes */
html.bootstrap-dark .header-search-box,
html.boostrap-dark .header-search-box,
html.bootstrap-dark .sub-header-search-box,
html.boostrap-dark .sub-header-search-box,
html.bootstrap-dark .text-search-box,
html.boostrap-dark .text-search-box {
color: var(--dm-text);
}
/* ======================================================
DARK MODE: Labels (inline + normal)
====================================================== */
html.bootstrap-dark label,
html.boostrap-dark label,
html.bootstrap-dark .form-label,
html.boostrap-dark .form-label {
color: #e6e6e6 !important;
}
html.bootstrap-dark label.required:after,
html.boostrap-dark label.required:after {
color: #ff6b6b !important;
}
/* Label Inline (Metronic style) */
html.bootstrap-dark .label.label-inline,
html.boostrap-dark .label.label-inline {
background-color: #3a3a3a !important;
color: #f2f2f2 !important;
border: 1px solid #555 !important;
}
/* Hover/Focus inline labels ที่เป็น interactive */
html.bootstrap-dark .label.label-inline:hover,
html.boostrap-dark .label.label-inline:hover {
background-color: #4a4a4a !important;
color: #fff !important;
}
/* -----------------------------
Forms & Inputs
----------------------------- */
html.bootstrap-dark .form-control,
html.boostrap-dark .form-control,
html.bootstrap-dark .custom-select,
html.boostrap-dark .custom-select {
color: var(--dm-text) !important;
background-color: var(--dm-elev-1) !important;
border: 1px solid var(--dm-border) !important;
}
html.bootstrap-dark .form-control[readonly],
html.boostrap-dark .form-control[readonly] {
background-color: var(--dm-elev-2) !important;
color: var(--dm-text) !important;
}
html.bootstrap-dark .input-group-addon,
html.boostrap-dark .input-group-addon {
background-color: var(--dm-elev-2);
color: var(--dm-text);
border: 1px solid var(--dm-border);
}
html.bootstrap-dark .input-group .form-control,
html.boostrap-dark .input-group .form-control {
background-color: #2a2a2a !important;
color: #f2f2f2 !important;
border: none;
}
html.bootstrap-dark .input-group-text,
html.boostrap-dark .input-group-text {
background-color: #3a3a3a !important;
color: #e6e6e6 !important;
border: none;
}
html.bootstrap-dark .input-group .form-select,
html.boostrap-dark .input-group .form-select {
background-color: #2a2a2a !important;
color: #f2f2f2 !important;
border: none;
}
/* Hover / Focus states */
html.bootstrap-dark .input-group .form-control:focus,
html.boostrap-dark .input-group .form-control:focus,
html.bootstrap-dark .input-group .form-select:focus,
html.boostrap-dark .input-group .form-select:focus {
background-color: #2f2f2f !important;
border-color: #666 !important;
box-shadow: 0 0 0 .2rem rgba(153, 222, 252, 0.25) !important; /* อิงสีฟ้าเดิม แต่โปร่ง */
color: #fff !important;
}
html.bootstrap-dark .input-group-text i,
html.boostrap-dark .input-group-text i {
color: #f2f2f2 !important; /* ไอคอนใน input-group-text */
}
/* ======================================================
DARK MODE INPUT-GROUP-SOLID PATCH
====================================================== */
html.bootstrap-dark .input-group.input-group-solid .form-control,
html.boostrap-dark .input-group.input-group-solid .form-control,
html.bootstrap-dark .input-group.input-group-solid .form-select,
html.boostrap-dark .input-group.input-group-solid .form-select {
background-color: #2f2f2f !important;
border: none;
color: #f2f2f2 !important;
}
html.bootstrap-dark .input-group.input-group-solid .form-control:focus,
html.boostrap-dark .input-group.input-group-solid .form-control:focus,
html.bootstrap-dark .input-group.input-group-solid .form-select:focus,
html.boostrap-dark .input-group.input-group-solid .form-select:focus {
background-color: #333 !important;
border-color: #666 !important;
box-shadow: 0 0 0 .2rem rgba(153, 222, 252, 0.25) !important;
color: #fff !important;
}
html.bootstrap-dark .input-group.input-group-solid .input-group-text,
html.boostrap-dark .input-group.input-group-solid .input-group-text {
background-color: #3a3a3a !important;
border: none;
color: #e6e6e6 !important;
}
html.bootstrap-dark .input-group.input-group-solid {
background-color: #3a3a3a !important;
}
html.bootstrap-dark .btn.btn-secondary.dropdown-toggle {
background-color: #3a3a3a !important;
border-color: #3a3a3a !important;
color: #f2f2f2 !important;
}
html.bootstrap-dark .btn.dropdown-toggle::after,
html.boostrap-dark .btn.dropdown-toggle::after {
color: #f2f2f2 !important;
}
html.bootstrap-dark .input-group.input-group-solid .input-group-text i,
html.boostrap-dark .input-group.input-group-solid .input-group-text i {
color: #f2f2f2 !important;
}
/* ======================================================
DARK MODE: Search Input Group (เจาะจง)
====================================================== */
html.bootstrap-dark .input-group.input-group-solid.xxxmax-w-200px.min-w-lg-350px.bd-left-0 .form-control,
html.boostrap-dark .input-group.input-group-solid.xxxmax-w-200px.min-w-lg-350px.bd-left-0 .form-control {
background-color: #2a2a2a !important;
color: #f2f2f2 !important;
border: none;
}
html.bootstrap-dark .input-group.input-group-solid.xxxmax-w-200px.min-w-lg-350px.bd-left-0 .form-control::placeholder,
html.boostrap-dark .input-group.input-group-solid.xxxmax-w-200px.min-w-lg-350px.bd-left-0 .form-control::placeholder {
color: #aaaaaa !important;
}
html.bootstrap-dark .input-group.input-group-solid.xxxmax-w-200px.min-w-lg-350px.bd-left-0 .form-control:focus,
html.boostrap-dark .input-group.input-group-solid.xxxmax-w-200px.min-w-lg-350px.bd-left-0 .form-control:focus {
background-color: #333 !important;
border-color: #666 !important;
box-shadow: 0 0 0 .2rem rgba(153, 222, 252, 0.25) !important;
color: #fff !important;
}
/* ปุ่ม search ด้านขวา */
html.bootstrap-dark .input-group.input-group-solid.xxxmax-w-200px.min-w-lg-350px.bd-left-0 .input-group-append .btn,
html.boostrap-dark .input-group.input-group-solid.xxxmax-w-200px.min-w-lg-350px.bd-left-0 .input-group-append .btn {
background-color: #3a3a3a !important;
border: none;
color: #e6e6e6 !important;
}
html.bootstrap-dark .input-group.input-group-solid.xxxmax-w-200px.min-w-lg-350px.bd-left-0 .input-group-append .btn:hover,
html.boostrap-dark .input-group.input-group-solid.xxxmax-w-200px.min-w-lg-350px.bd-left-0 .input-group-append .btn:hover {
background-color: #4a4a4a !important;
color: #ffffff !important;
}
/* ไอคอน svg ในปุ่ม search */
html.bootstrap-dark .input-group.input-group-solid.xxxmax-w-200px.min-w-lg-350px.bd-left-0 .input-group-append .btn svg path,
html.boostrap-dark .input-group.input-group-solid.xxxmax-w-200px.min-w-lg-350px.bd-left-0 .input-group-append .btn svg path {
fill: #e6e6e6 !important;
}
/* File input button wrapper */
html.bootstrap-dark .btn-file,
html.boostrap-dark .btn-file {
background-color: var(--dm-elev-2);
color: var(--dm-text);
border: 1px solid var(--dm-border);
}
/* jQuery UI Datepicker */
html.bootstrap-dark .ui-datepicker,
html.boostrap-dark .ui-datepicker {
background: var(--dm-elev-2);
border-color: var(--dm-border);
color: var(--dm-text);
}
html.bootstrap-dark .ui-datepicker .ui-datepicker-title select,
html.boostrap-dark .ui-datepicker .ui-datepicker-title select {
background: var(--dm-elev-1);
color: var(--dm-text);
border-color: var(--dm-border);
}
/* -----------------------------
Tables
----------------------------- */
html.bootstrap-dark .table-striped tr:nth-child(odd),
html.boostrap-dark .table-striped tr:nth-child(odd) {
background-color: var(--dm-elev-1) !important;
}
html.bootstrap-dark .table-striped tr:nth-child(even),
html.boostrap-dark .table-striped tr:nth-child(even) {
background-color: var(--dm-bg-2) !important;
}
html.bootstrap-dark table#doc_list td,
html.boostrap-dark table#doc_list td {
border-color: var(--dm-border) !important;
}
/* Table head search */
html.bootstrap-dark .table_head,
html.boostrap-dark .table_head {
background: var(--dm-elev-2);
border: 1px solid var(--dm-border);
color: var(--dm-text);
}
/* Data row background */
html.bootstrap-dark .data-row:nth-child(even),
html.boostrap-dark .data-row:nth-child(even) {
background-color: var(--dm-elev-1) !important;
}
/* KT Datatable specifics */
.bootstrap-dark .datatable-head{
background-color: #212529;
}
.bootstrap-dark .datatable-body {
background-color: #212529!important;
}
.bootstrap-dark .datatable-table tbody tr:hover {
background-color: #212529!important;
}
.bootstrap-dark .datatable-pager{
background-color: #212529!important;
}
.bootstrap-dark .datatable.datatable-default > .datatable-table > .datatable-body .datatable-row > .datatable-cell > span {
color: #d3d3d3;
}
.bootstrap-dark .rounded-table {
border: 1px solid #6c757d;
}
.datatable.datatable-default > .datatable-table > .datatable-head .datatable-row > .not-sort.datatable-cell.datatable-cell-sort, .datatable.datatable-default > .datatable-table > .datatable-body .datatable-row > .not-sort.datatable-cell.datatable-cell-sort, .datatable.datatable-default > .datatable-table > .datatable-foot .datatable-row > .datatable-cell.datatable-cell-sort {
cursor: default;
}
.bootstrap-dark .datatable.datatable-default > .datatable-table {
background-color: #212529!important;
}
.bootstrap-dark .datatable.datatable-default.datatable-bordered > .datatable-table > .datatable-head .datatable-row,.bootstrap-dark .datatable.datatable-default.datatable-bordered > .datatable-table > .datatable-body .datatable-row, .datatable.datatable-default.datatable-bordered > .datatable-table > .datatable-foot .datatable-row {
border-bottom: 1px solid #8A8A8A;
}
.bootstrap-dark .datatable.datatable-default.datatable-bordered > .datatable-table > .datatable-body .datatable-row-detail .datatable-detail table {
border-left: 1px solid #8A8A8A;
border-right: 1px solid #8A8A8A;
}
html.bootstrap-dark .datatable.datatable-default > .datatable-table,
html.boostrap-dark .datatable.datatable-default > .datatable-table {
background-color: var(--dm-elev-1);
color: var(--dm-text);
}
html.bootstrap-dark .datatable.datatable-default > .datatable-table .datatable-head .datatable-row > .datatable-cell > span,
html.boostrap-dark .datatable.datatable-default > .datatable-table .datatable-head .datatable-row > .datatable-cell > span {
color: #eaeaea;
}
html.bootstrap-dark .datatable-row.datatable-row-hover,
html.boostrap-dark .datatable-row.datatable-row-hover {
background-color: rgba(103, 197, 255, 0.16) !important;
}
/* Sorting highlight */
html.bootstrap-dark .dataTables_wrapper .dataTable th.sorting_desc,
html.bootstrap-dark .dataTables_wrapper .dataTable td.sorting_desc,
html.bootstrap-dark .dataTables_wrapper .dataTable th.sorting_asc,
html.bootstrap-dark .dataTables_wrapper .dataTable td.sorting_asc,
html.boostrap-dark .dataTables_wrapper .dataTable th.sorting_desc,
html.boostrap-dark .dataTables_wrapper .dataTable td.sorting_desc,
html.boostrap-dark .dataTables_wrapper .dataTable th.sorting_asc,
html.boostrap-dark .dataTables_wrapper .dataTable td.sorting_asc {
color: #f0f0f0 !important;
}
/* -----------------------------
DataTables (paging, info, filters)
----------------------------- */
html.bootstrap-dark .dataTables_wrapper,
html.boostrap-dark .dataTables_wrapper {
color: var(--dm-text) !important;
}
html.bootstrap-dark .dataTables_wrapper .dataTables_filter input,
html.boostrap-dark .dataTables_wrapper .dataTables_filter input {
background: var(--dm-elev-1);
color: var(--dm-text);
border: 1px solid var(--dm-border);
}
html.bootstrap-dark .dataTables_wrapper .dataTables_paginate .paginate_button,
html.boostrap-dark .dataTables_wrapper .dataTables_paginate .paginate_button {
color: var(--dm-text) !important;
border: 1px solid var(--dm-border) !important;
background: var(--dm-elev-1) !important;
}
html.bootstrap-dark .dataTables_wrapper .dataTables_paginate .paginate_button.current,
html.bootstrap-dark .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover,
html.boostrap-dark .dataTables_wrapper .dataTables_paginate .paginate_button.current,
html.boostrap-dark .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
background: var(--dm-elev-2) !important;
border-color: #666 !important;
color: #fff !important;
}
html.bootstrap-dark .dataTables_wrapper .dataTables_paginate .paginate_button:hover,
html.boostrap-dark .dataTables_wrapper .dataTables_paginate .paginate_button:hover {
background: #444 !important;
border-color: #777 !important;
color: #fff !important;
}
html.bootstrap-dark .dataTables_processing,
html.boostrap-dark .dataTables_processing {
background: rgba(35,35,35,.85) !important;
color: var(--dm-text) !important;
}
html.bootstrap-dark .dataTables_wrapper.no-footer .dataTables_scrollBody,
html.boostrap-dark .dataTables_wrapper.no-footer .dataTables_scrollBody {
border-bottom: 1px solid var(--dm-border);
}
/* Info/paginate hide blocks (respect your visibility) */
html.bootstrap-dark div .dataTables_info,
html.bootstrap-dark div .dataTables_paginate,
html.boostrap-dark div .dataTables_info,
html.boostrap-dark div .dataTables_paginate {
background: transparent;
color: var(--dm-text);
}
/* ======================================================
DARK MODE: Tables
====================================================== */
html.bootstrap-dark table,
html.boostrap-dark table {
color: #e6e6e6 !important;
background-color: transparent !important;
}
html.bootstrap-dark th,
html.boostrap-dark th {
background-color: #2f2f2f !important;
color: #ffffff !important;
border-color: #444 !important;
}
html.bootstrap-dark td,
html.boostrap-dark td {
background-color: #1f1f1f !important;
color: #e6e6e6 !important;
border-color: #333 !important;
}
/* Hover row */
html.bootstrap-dark tr:hover td,
html.boostrap-dark tr:hover td {
background-color: #2a2a2a !important;
color: #fff !important;
}
/* Table head */
html.bootstrap-dark thead tr,
html.boostrap-dark thead tr {
background-color: #333 !important;
color: #fff !important;
}
/* Table striped */
html.bootstrap-dark .table-striped tbody tr:nth-of-type(odd),
html.boostrap-dark .table-striped tbody tr:nth-of-type(odd) {
background-color: #242424 !important;
}
html.bootstrap-dark .table-striped tbody tr:nth-of-type(even),
html.boostrap-dark .table-striped tbody tr:nth-of-type(even) {
background-color: #1c1c1c !important;
}
/* Table bordered */
html.bootstrap-dark .table-bordered th,
html.bootstrap-dark .table-bordered td,
html.boostrap-dark .table-bordered th,
html.boostrap-dark .table-bordered td {
border: 1px solid #444 !important;
}
/* ตัด inline background/gradient บน th ใน dark mode */
html.bootstrap-dark thead th[style],
html.boostrap-dark thead th[style]{
color:#fff !important;
background-color:#2f2f2f !important;
background-image:none !important; /* ลบ gradient inline */
background:none !important;
border-color:#444 !important;
}
/* กรณีมีคลาส .text-middle หรือตาราง sticky */
html.bootstrap-dark .fixTableHead thead th,
html.bootstrap-dark th.text-middle{
color:#fff !important;
background-color:#2f2f2f !important;
background-image:none !important;
border-color:#444 !important;
}
/* ถ้าอยากคง “ลายแบ่งครึ่ง” แบบ gradient แต่ให้เข้ม */
html.bootstrap-dark thead th[style*="linear-gradient"]{
background-image:linear-gradient(to bottom,#2f2f2f 50%, #262626 50%) !important;
}
/* -----------------------------
Modals
----------------------------- */
html.bootstrap-dark .modal-content,
html.boostrap-dark .modal-content {
background-color: var(--dm-elev-1) !important;
color: var(--dm-text) !important;
border-color: var(--dm-border) !important;
}
html.bootstrap-dark .modal-header,
html.boostrap-dark .modal-header {
background-color: var(--dm-elev-2) !important;
color: #fff !important;
}
html.bootstrap-dark .modal.float-menu .modal-content,
html.boostrap-dark .modal.float-menu .modal-content {
background-color: var(--dm-elev-1) !important;
color: var(--dm-text) !important;
}
html.bootstrap-dark .close,
html.boostrap-dark .close {
color: #fff !important;
}
/* -----------------------------
Miscellaneous helpers
----------------------------- */
html.bootstrap-dark .group_gadget .form-group,
html.boostrap-dark .group_gadget .form-group {
color: var(--dm-text);
}
html.bootstrap-dark .btn_breadcrumb,
html.boostrap-dark .btn_breadcrumb {
background-color: var(--dm-elev-2);
color: var(--dm-text);
border: 1px solid var(--dm-border);
}
html.bootstrap-dark .centered,
html.boostrap-dark .centered {
color: var(--dm-text);
}
html.bootstrap-dark .test-color,
html.boostrap-dark .test-color {
background-color: #000;
color: #ff8a8a;
}
/* Keep custom brand palettes readable on dark */
html.bootstrap-dark .bg-cust-yellow, html.boostrap-dark .bg-cust-yellow { color: #1a1a1a; }
html.bootstrap-dark .bg-cust-blue, html.boostrap-dark .bg-cust-blue { color: #0b0b0b; }
html.bootstrap-dark .bg-cust-rblue, html.boostrap-dark .bg-cust-rblue { color: #0b0b0b; }
html.bootstrap-dark .bg-cust-hblue, html.boostrap-dark .bg-cust-hblue { color: #ffffff; }
html.bootstrap-dark .bg-cust-red, html.boostrap-dark .bg-cust-red { color: #1a1a1a; }
html.bootstrap-dark .bg-cust-rblue2, html.boostrap-dark .bg-cust-rblue2 { color: #0b0b0b; }
html.bootstrap-dark .btn.btn-cust-yellow,
html.boostrap-dark .btn.btn-cust-yellow {
color: #000;
background-color: #f6f487;
border-color: #f6f487;
}
/* ======================================================
DARK MODE: Dropdown Menu
====================================================== */
html.bootstrap-dark .dropdown-menu,
html.boostrap-dark .dropdown-menu {
background-color: var(--dm-elev-1);
color: var(--dm-text);
border-color: var(--dm-border);
}
html.bootstrap-dark .dropdown-header,
html.boostrap-dark .dropdown-header {
color: #fff;
}
html.bootstrap-dark .dropdown-menu i,
html.boostrap-dark .dropdown-menu i {
color: var(--dm-text);
}
html.bootstrap-dark .dropdown-item,
html.boostrap-dark .dropdown-item {
color: var(--dm-text) !important;
background-color: transparent !important;
}
html.bootstrap-dark .dropdown-item:hover,
html.bootstrap-dark .dropdown-item:focus,
html.boostrap-dark .dropdown-item:hover,
html.boostrap-dark .dropdown-item:focus {
color: #fff !important;
background-color: #3a3a3a !important; /* พื้นเข้มขึ้นเมื่อ hover */
}
html.bootstrap-dark .dropdown-item.active,
html.bootstrap-dark .dropdown-item:active,
html.boostrap-dark .dropdown-item.active,
html.boostrap-dark .dropdown-item:active {
color: #fff !important;
background-color: #575757 !important; /* active state */
}
html.bootstrap-dark .dropdown-item.shelf-select,
html.boostrap-dark .dropdown-item.shelf-select {
color: var(--dm-text);
}
/* Launcher & locks */
html.bootstrap-dark #app-Launcher,
html.boostrap-dark #app-Launcher {
background: var(--dm-elev-1);
color: var(--dm-text);
}
html.bootstrap-dark .bg-lock,
html.boostrap-dark .bg-lock {
background-color: #000;
opacity: .35;
}
/* Dropzone custom */
html.bootstrap-dark .dropzone,
html.boostrap-dark .dropzone {
background-color: var(--dm-elev-1) !important;
color: var(--dm-text) !important;
}
html.bootstrap-dark .dropzone.dropzone-multi .dropzone-item .dz-custom-bgcol,
html.boostrap-dark .dropzone.dropzone-multi .dropzone-item .dz-custom-bgcol {
background-color: var(--dm-elev-2);
color: var(--dm-text);
}
html.bootstrap-dark .dropzone-panel {
background-color: var(--dm-elev-1);
}
/* Custom text helpers */
html.bootstrap-dark .text-cust-blue,
html.boostrap-dark .text-cust-blue { color: #67c5ff !important; }
html.bootstrap-dark .text-cust-rblue,
html.boostrap-dark .text-cust-rblue { color: #bfe8ff !important; }
html.bootstrap-dark .text-cust-hblue,
html.boostrap-dark .text-cust-hblue { color: #8ab6ff !important; }
/* Breadcrumb divider color stays readable */
html.bootstrap-dark .breadcrumb-item + .breadcrumb-item::before,
html.boostrap-dark .breadcrumb-item + .breadcrumb-item::before {
color: var(--dm-text);
}
/* -----------------------------
Scrollbars
----------------------------- */
html.bootstrap-dark ::-webkit-scrollbar,
html.boostrap-dark ::-webkit-scrollbar { width: 0.8em; }
html.bootstrap-dark ::-webkit-scrollbar-track,
html.boostrap-dark ::-webkit-scrollbar-track { background: rgba(80,80,80,.3); }
html.bootstrap-dark ::-webkit-scrollbar-thumb,
html.boostrap-dark ::-webkit-scrollbar-thumb { background: rgba(160,160,160,.45); }
html.bootstrap-dark ::-webkit-scrollbar-thumb:hover,
html.boostrap-dark ::-webkit-scrollbar-thumb:hover { background: #888; }
/* -----------------------------
Utilities mirroring your base
----------------------------- */
html.bootstrap-dark .table-margin,
html.boostrap-dark .table-margin,
html.bootstrap-dark .div-padding,
html.boostrap-dark .div-padding,
html.bootstrap-dark .page-number,
html.boostrap-dark .page-number,
html.bootstrap-dark .input-page-number,
html.boostrap-dark .input-page-number,
html.bootstrap-dark .doc-line,
html.boostrap-dark .doc-line {
color: var(--dm-text);
border-color: var(--dm-border);
}
/* Prevent
name fields from breaking lines (keep behavior) */
html.bootstrap-dark [name|="car_name_go"] br,
html.bootstrap-dark [name|="chauffeur_name_go"] br,
html.bootstrap-dark [name|="car_name_back"] br,
html.bootstrap-dark [name|="chauffeur_name_back"] br,
html.boostrap-dark [name|="car_name_go"] br,
html.boostrap-dark [name|="chauffeur_name_go"] br,
html.boostrap-dark [name|="car_name_back"] br,
html.boostrap-dark [name|="chauffeur_name_back"] br {
display: none;
}
/* Keep hidden info/paginate states intact */
html.bootstrap-dark .dataTables_empty,
html.boostrap-dark .dataTables_empty {
color: var(--dm-text);
}
/* Preserve special headers that use brand colors */
html.bootstrap-dark .modal-header .modal-title,
html.boostrap-dark .modal-header .modal-title,
html.bootstrap-dark .modal-title,
html.boostrap-dark .modal-title {
color: #fff;
}
/* Inputs inside .modal-body column grid */
html.bootstrap-dark .modal-body .col-12,
html.boostrap-dark .modal-body .col-12 {
color: var(--dm-text);
}
/* Sorting color override already included above */
/* -----------------------------
DataTables scroll sections
----------------------------- */
html.bootstrap-dark .dataTables_wrapper .dataTables_scroll div.dataTables_scrollBody th,
html.bootstrap-dark .dataTables_wrapper .dataTables_scroll div.dataTables_scrollBody td,
html.boostrap-dark .dataTables_wrapper .dataTables_scroll div.dataTables_scrollBody th,
html.boostrap-dark .dataTables_wrapper .dataTables_scroll div.dataTables_scrollBody td {
background-color: transparent;
color: var(--dm-text);
border-color: var(--dm-border);
}
/* Table head/foot borders (no-footer cases) */
html.bootstrap-dark .dataTables_wrapper.no-footer div.dataTables_scrollHead table,
html.bootstrap-dark .dataTables_wrapper.no-footer div.dataTables_scrollBody table,
html.boostrap-dark .dataTables_wrapper.no-footer div.dataTables_scrollHead table,
html.boostrap-dark .dataTables_wrapper.no-footer div.dataTables_scrollBody table {
border-bottom: none;
}
/* --------------------------------
Pagination, ellipsis, info text
-------------------------------- */
html.bootstrap-dark .dataTables_wrapper .dataTables_paginate .ellipsis,
html.boostrap-dark .dataTables_wrapper .dataTables_paginate .ellipsis {
color: var(--dm-text);
}
html.bootstrap-dark .dataTables_wrapper .dataTables_info,
html.boostrap-dark .dataTables_wrapper .dataTables_info {
color: var(--dm-text-muted);
}
/* -----------------------------
Breadcrumb custom backgrounds overrides
----------------------------- */
html.bootstrap-dark ol.breadcrumb,
html.boostrap-dark ol.breadcrumb {
background-color: var(--dm-elev-2) !important;
}
/* -----------------------------
Misc visibility and helpers
----------------------------- */
html.bootstrap-dark .breacrumb-dummy,
html.boostrap-dark .breacrumb-dummy {
opacity: 0;
}
/* ---------- Icons with text-dark only ---------- */
html.bootstrap-dark .text-dark i,
html.boostrap-dark .text-dark i,
html.bootstrap-dark .text-dark [class^="fa-"],
html.bootstrap-dark .text-dark .fa,
html.bootstrap-dark .text-dark .fas,
html.bootstrap-dark .text-dark .far,
html.bootstrap-dark .text-dark .fal,
html.bootstrap-dark .text-dark .fab,
html.boostrap-dark .text-dark [class^="fa-"],
html.boostrap-dark .text-dark .fa,
html.boostrap-dark .text-dark .fas,
html.boostrap-dark .text-dark .far,
html.boostrap-dark .text-dark .fal,
html.boostrap-dark .text-dark .fab,
html.bootstrap-dark .text-dark [class^="bi-"],
html.bootstrap-dark .text-dark .bi,
html.boostrap-dark .text-dark [class^="bi-"],
html.boostrap-dark .text-dark .bi,
html.bootstrap-dark .text-dark [class*=" ki-"],
html.bootstrap-dark .text-dark .ki,
html.boostrap-dark .text-dark [class*=" ki-"],
html.boostrap-dark .text-dark .ki {
color: #eaeaea !important;
}
/* SVG inside text-dark */
html.bootstrap-dark .text-dark svg,
html.boostrap-dark .text-dark svg {
color: #eaeaea !important;
fill: currentColor !important;
stroke: currentColor !important;
}
html.bootstrap-dark .text-dark svg *,
html.boostrap-dark .text-dark svg * {
fill: currentColor !important;
stroke: currentColor !important;
}
/* ======================================================
DARK MODE: and
====================================================== */
html.bootstrap-dark b,
html.boostrap-dark b,
html.bootstrap-dark strong,
html.boostrap-dark strong {
color: #ffffff !important; /* เน้นข้อความขาวชัด */
font-weight: bold;
}
/* html.bootstrap-dark span,
html.boostrap-dark span {
color: #e6e6e6 !important;
} */
/* หรือยกเว้น badge (ลดผลกระทบองค์ประกอบ UI) */
html.bootstrap-dark span:not(.badge):not(.badge *):not(.text-danger):not(.text-primary):not(.text-secondary):not(.text-success):not(.text-warning):not(.text-info) {
color: #e6e6e6 !important;
}
/* ถ้า span อยู่ใน context ที่ต้องเน้น (เช่น .text-dark) */
html.bootstrap-dark span.text-dark,
html.boostrap-dark span.text-dark {
color: #f2f2f2 !important;
}
/* ======================================================
DARK MODE UTILITY PATCH
ปรับสี utility classes ของ Bootstrap ให้เข้มขึ้น
====================================================== */
/* Backgrounds */
html.bootstrap-dark .bg-light,
html.boostrap-dark .bg-light,
html.bootstrap-dark .bg-white,
html.boostrap-dark .bg-white {
background-color: #2a2a2a !important;
color: #f2f2f2 !important;
}
html.bootstrap-dark .bg-secondary,
html.boostrap-dark .bg-secondary {
background-color: #3a3a3a !important;
color: #fff !important;
}
html.bootstrap-dark .bg-info,
html.boostrap-dark .bg-info {
background-color: #0dcaf0 !important;
color: #0b0b0b !important;
}
html.bootstrap-dark .bg-warning,
html.boostrap-dark .bg-warning {
background-color: #ffc107 !important;
color: #0b0b0b !important;
}
html.bootstrap-dark .bg-danger,
html.boostrap-dark .bg-danger {
background-color: #dc3545 !important;
color: #fff !important;
}
html.bootstrap-dark .bg-success,
html.boostrap-dark .bg-success {
background-color: #198754 !important;
color: #fff !important;
}
/* ======================================================
DARK MODE: bg-gray-* utilities
====================================================== */
html.bootstrap-dark .bg-gray-100,
html.boostrap-dark .bg-gray-100 { background-color: #2f2f2f !important; color: #f2f2f2 !important; }
html.bootstrap-dark .bg-gray-200,
html.boostrap-dark .bg-gray-200 { background-color: #2f2f2f !important; color: #f2f2f2 !important; }
html.bootstrap-dark .bg-gray-300,
html.boostrap-dark .bg-gray-300 { background-color: #333 !important; color: #f2f2f2 !important; }
html.bootstrap-dark .bg-gray-400,
html.boostrap-dark .bg-gray-400 { background-color: #3a3a3a !important; color: #f2f2f2 !important; }
html.bootstrap-dark .bg-gray-500,
html.boostrap-dark .bg-gray-500 { background-color: #444 !important; color: #f2f2f2 !important; }
html.bootstrap-dark .bg-gray-600,
html.boostrap-dark .bg-gray-600 { background-color: #555 !important; color: #f2f2f2 !important; }
html.bootstrap-dark .bg-gray-700,
html.boostrap-dark .bg-gray-700 { background-color: #666 !important; color: #f2f2f2 !important; }
html.bootstrap-dark .bg-gray-800,
html.boostrap-dark .bg-gray-800 { background-color: #777 !important; color: #f2f2f2 !important; }
html.bootstrap-dark .bg-gray-900,
html.boostrap-dark .bg-gray-900 { background-color: #888 !important; color: #f2f2f2 !important; }
/* Text colors */
html.bootstrap-dark .text-dark,
html.boostrap-dark .text-dark {
color: #f2f2f2 !important;
}
html.bootstrap-dark .text-body,
html.boostrap-dark .text-body {
color: #e6e6e6 !important;
}
html.bootstrap-dark .text-muted,
html.boostrap-dark .text-muted {
color: #cfcfcf !important;
}
/* Borders */
html.bootstrap-dark .border,
html.boostrap-dark .border,
html.bootstrap-dark .border-light,
html.boostrap-dark .border-light {
border-color: #444 !important;
}
html.bootstrap-dark .border-dark,
html.boostrap-dark .border-dark {
border-color: #888 !important;
}
/* Tables (utility background) */
html.bootstrap-dark .table .thead-light th,
html.boostrap-dark .table .thead-light th {
background-color: #2f2f2f !important;
color: #f2f2f2 !important;
}
html.bootstrap-dark .table .thead-dark th,
html.boostrap-dark .table .thead-dark th {
background-color: #444 !important;
color: #fff !important;
}
/* signin */
html.bootstrap-dark .form-signin .form-bg,
html.boostrap-dark .form-signin .form-bg {
background-color: transparent!important;
}
html.bootstrap-dark .main-logo .logo-bg,
html.boostrap-dark .main-logo .logo-bg {
background-color: transparent!important;
}