/* =========================================================
   DARK MODE (V68.7.8.309)
   - โหลดเฉพาะเมื่อเปิดฟีเจอร์ dark_mode_enabled · ทุกกฎขึ้นต้น html[data-theme="dark"]
   - เฟส D1: ตัวแปรสีหลัก + ชิ้นส่วนกลาง (card · ตาราง · ฟอร์ม · modal · dropdown · toast · sidebar · dock · Swal)
     หน้าที่ยังมีสีเขียนตายตัวในไฟล์ของตัวเอง ทยอยแก้ในเฟส D2 (เพิ่มกฎท้ายไฟล์นี้ หรือเปลี่ยนเป็น var(--…))
   - หัวเพจน้ำเงิน (hero) และปุ่ม/การ์ด brand ไล่สี เป็นพื้นเข้มอยู่แล้ว → ไม่แตะ
   - ห้ามใส่สีมืดในไฟล์หน้า ให้เพิ่มที่นี่ที่เดียว
   ========================================================= */
html[data-theme="dark"] {
  color-scheme: dark;
  /* ── พาเลตต์ (โทนเทากลางแบบ Facebook) — แหล่งสีเดียวของโหมดมืด · ตัวแปรของหน้า (--yd-muted ฯลฯ) ถูกแปลงมาชี้ชุดนี้ ──
     พื้น: bg 0 → card 1 → card2 (ช่องกรอก/ชิป) → hover · ข้อความ: text (หลัก 15.1:1) · text2 (รอง 8.2:1) · text3 (บอกใบ้ 4.6:1)
     เส้น: line · ฟ้า: accent (ลิงก์/ไอคอน 6.0:1) · accent-strong (ปุ่ม/active ตัวหนังสือขาว 4.6:1) */
  --fb-bg: #18191a;
  --fb-card: #242526;
  --fb-card2: #3a3b3c;
  --fb-hover: #4e4f50;
  --fb-text: #e4e6eb;
  --fb-text2: #b0b3b8;
  --fb-text3: #8a8d91;
  --fb-line: #3e4042;
  --fb-accent: #4599ff;
  --fb-accent-strong: #2374e1;
  --fb-accent-mid: #3d8bfd; /* ตัวแปรสีแบรนด์ของหน้า (ใช้ทั้งเป็นตัวหนังสือและพื้น): ตัวหนังสือบนการ์ด 4.6:1 · ตัวขาวบนพื้นนี้ 3.3:1 (ตัวหนา/ปุ่มผ่าน) */
  --fb-accent-soft: rgba(45, 136, 255, 0.16);
  --fb-warn: #f7b928;
  --fb-warn-soft: rgba(247, 185, 40, 0.14);
  --fb-danger: #ff6b6b;
  --fb-danger-soft: rgba(240, 40, 73, 0.16);

  --bg0: var(--fb-bg);
  --bg1: var(--fb-bg);
  --card: var(--fb-card);
  --muted: var(--fb-text2);
  --text: var(--fb-text);
  --border: var(--fb-line);
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
  --soft: rgba(255, 255, 255, 0.06);
  /* --primary ใช้เป็นสีตัวหนังสือ/ไอคอน → ต้องสว่างกว่า brand (#03338a) บนพื้นมืด · --brand ยังเป็นสีพื้นปุ่มเหมือนเดิม */
  --primary: var(--fb-accent);
  --cyan: #38bdf8;
  --bs-body-bg: var(--bg0);
  --bs-body-color: var(--text);
  --bs-border-color: var(--border);
  --bs-secondary-color: var(--muted);
  --bs-link-color: #4599ff;
  --bs-link-hover-color: #8bbaff;
}

html[data-theme="dark"] body {
  /* พื้นหน้าเรียบสีเดียวแบบ Facebook — ต้อง !important เพื่อชนะกฎ body ที่ dark_auto.css แปลงมาจาก app.css */
  background: var(--fb-bg) !important;
  background-image: none !important;
  color: var(--text);
}

/* ── ข้อความ/ลิงก์ ───────────────────────────────────── */
html[data-theme="dark"] .text-muted,
html[data-theme="dark"] .text-secondary { color: var(--muted) !important; }
html[data-theme="dark"] .text-dark { color: var(--text) !important; }
html[data-theme="dark"] .bg-white,
html[data-theme="dark"] .bg-light { background-color: var(--card) !important; }
html[data-theme="dark"] a:not([class]) { color: var(--bs-link-color); }
html[data-theme="dark"] hr { border-color: var(--border); }

/* ── การ์ด / กล่อง ──────────────────────────────────── */
html[data-theme="dark"] .card,
html[data-theme="dark"] .card-yd,
html[data-theme="dark"] .list-group-item { background: var(--card); border-color: var(--border); color: var(--text); }
html[data-theme="dark"] .card-yd { box-shadow: var(--shadow); }
html[data-theme="dark"] .promo-kpi-card { background-image: none; }
html[data-theme="dark"] .yd-note { background: rgba(255, 255, 255, 0.08); border-color: var(--border); color: var(--text); }
html[data-theme="dark"] .yd-note-info { background: rgba(59, 130, 246, 0.14); border-color: rgba(59, 130, 246, 0.35); }
html[data-theme="dark"] .yd-note-warning { background: rgba(245, 158, 11, 0.14); border-color: rgba(245, 158, 11, 0.38); }
html[data-theme="dark"] .yd-note-danger { background: rgba(239, 68, 68, 0.14); border-color: rgba(239, 68, 68, 0.38); }
html[data-theme="dark"] .yd-note-success { background: rgba(59, 130, 246, 0.12); border-color: rgba(59, 130, 246, 0.3); }

/* ── ตาราง ─────────────────────────────────────────── */
html[data-theme="dark"] .table { --bs-table-color: var(--text); --bs-table-bg: transparent; --bs-table-border-color: var(--border); --bs-table-striped-bg: rgba(255, 255, 255, 0.05); --bs-table-hover-bg: rgba(255, 255, 255, 0.09); color: var(--text); }
html[data-theme="dark"] .table-yd thead th,
html[data-theme="dark"] .table-yd > thead > tr > th { background: rgba(255, 255, 255, 0.1); color: var(--muted); border-color: var(--border); }
html[data-theme="dark"] .table-yd td { color: var(--text); border-color: var(--border); }
html[data-theme="dark"] .yd-empty { background: rgba(255, 255, 255, 0.06); border-color: var(--border); color: var(--muted); }

/* ── ฟอร์ม ─────────────────────────────────────────── */
html[data-theme="dark"] .form-control,
html[data-theme="dark"] .form-select,
html[data-theme="dark"] .input-group-text,
html[data-theme="dark"] textarea,
html[data-theme="dark"] select {
  background-color: #3a3b3c !important;
  border-color: rgba(255, 255, 255, 0.28) !important;
  color: var(--text) !important;
}
html[data-theme="dark"] .form-control::placeholder { color: rgba(255, 255, 255, 0.6); }
html[data-theme="dark"] .form-control:disabled,
html[data-theme="dark"] .form-select:disabled,
html[data-theme="dark"] .form-control[readonly] { background-color: rgba(255, 255, 255, 0.1) !important; color: var(--muted) !important; }
html[data-theme="dark"] .form-control:focus,
html[data-theme="dark"] .form-select:focus { border-color: rgba(69, 153, 255, 0.7) !important; box-shadow: 0 0 0 0.2rem rgba(69, 153, 255, 0.2) !important; }
html[data-theme="dark"] .form-check-input { background-color: #3a3b3c; border-color: rgba(255, 255, 255, 0.45); }
html[data-theme="dark"] .form-check-input:checked { background-color: var(--brand); border-color: #4599ff; }
html[data-theme="dark"] option { background: #3a3b3c; color: var(--text); }

/* ── modal / dropdown / popup ──────────────────────── */
html[data-theme="dark"] .modal-content,
html[data-theme="dark"] .offcanvas,
html[data-theme="dark"] .dropdown-menu,
html[data-theme="dark"] .yd-dd-menu,
html[data-theme="dark"] .popover { background: var(--card); color: var(--text); border-color: var(--border); }
html[data-theme="dark"] .modal-header,
html[data-theme="dark"] .modal-footer { border-color: var(--border); }
html[data-theme="dark"] .btn-close { filter: invert(1) grayscale(100%) brightness(200%); }
html[data-theme="dark"] .dropdown-item { color: var(--text); }
html[data-theme="dark"] .dropdown-item:hover,
html[data-theme="dark"] .dropdown-item:focus { background: rgba(69, 153, 255, 0.14); color: var(--text); }
html[data-theme="dark"] .yd-announce { color: var(--text); }
html[data-theme="dark"] .toast-yd { background: rgba(36, 37, 38, 0.96); color: var(--text); }
html[data-theme="dark"] .swal2-popup { background: var(--card); color: var(--text); }
html[data-theme="dark"] .swal2-title,
html[data-theme="dark"] .swal2-html-container { color: var(--text); }

/* ── ป้ายสถานะ (ใช้ --ydb-* ตัวเดียว) ───────────────── */
html[data-theme="dark"] .yd-badge { --ydb-fg: #cbd5e1; }
html[data-theme="dark"] .yd-badge.yd-badge--ok,
html[data-theme="dark"] .yd-badge.is-ok { --ydb-fg: #8bbaff; }

/* ── แถบบน / sidebar / account dock ────────────────── */
html[data-theme="dark"] .navbar-yd { background: rgba(36, 37, 38, 0.92); border-color: var(--border); }
html[data-theme="dark"] .yd-sidebar { background: var(--card); border-color: var(--border); }
html[data-theme="dark"] .yd-sidebar a,
html[data-theme="dark"] .yd-sidebar .nav-link { color: var(--text); }
html[data-theme="dark"] .yd-sidebar .yd-dock__q { background: rgba(255, 255, 255, 0.1); color: var(--text); }
html[data-theme="dark"] .yd-sidebar .yd-dock__logout { background: rgba(255, 255, 255, 0.08); border-color: var(--border); color: var(--text); }
html[data-theme="dark"] .yd-sidebar .yd-dock__logout:hover { background: rgba(239, 68, 68, 0.16); color: #fca5a5; }
html[data-theme="dark"] .yd-sidebar .yd-dock__ico { background: rgba(69, 153, 255, 0.16); color: #8bbaff; }

/* ── ปุ่มสลับธีม (sidebar dock · หน้า login) ─────────── */
.yd-theme-switch { display: flex; gap: 4px; padding: 4px; border-radius: 14px; background: rgba(15, 23, 42, 0.05); border: 1px solid rgba(15, 23, 42, 0.1); margin-bottom: 8px; }
.yd-theme-switch__btn { flex: 1 1 0; min-width: 0; display: inline-flex; align-items: center; justify-content: center; gap: 6px; border: 0; background: transparent; color: #475569; font: 600 12px/1 var(--font); padding: 8px 6px; border-radius: 10px; cursor: pointer; transition: background .15s ease, color .15s ease; }
.yd-theme-switch__btn .bi { color: inherit !important; font-size: 14px; }
.yd-theme-switch__btn:hover { background: rgba(3, 51, 138, 0.08); }
.yd-theme-switch__btn.is-on { background: var(--brand); color: #fff; box-shadow: 0 6px 14px -8px rgba(3, 51, 138, 0.8); }
.yd-theme-switch__btn:focus-visible { outline: 2px solid #4599ff; outline-offset: 2px; }
.yd-theme-switch--float { position: fixed; right: 14px; bottom: 14px; z-index: 1040; margin: 0; background: #fff; box-shadow: 0 10px 24px -12px rgba(15, 23, 42, 0.5); }
html[data-theme="dark"] .yd-theme-switch--float { background: var(--card); }
@media (max-width: 575.98px) { .yd-theme-switch--float .yd-theme-switch__btn span { display: none; } }
.yd-sidebar .yd-theme-switch--dock { container-type: inline-size; }
@container (max-width: 190px) { .yd-theme-switch__btn span { display: none; } }
html[data-theme="dark"] .yd-theme-switch { background: rgba(255, 255, 255, 0.08); border-color: var(--border); }
html[data-theme="dark"] .yd-theme-switch__btn { color: var(--muted); }
html[data-theme="dark"] .yd-theme-switch__btn:hover { background: rgba(69, 153, 255, 0.14); }
html[data-theme="dark"] .yd-theme-switch__btn.is-on { background: #2374e1; color: #fff; }

/* ── พิมพ์: ใช้ธีมสว่างเสมอ ───────────────────────── */
@media print {
  html[data-theme="dark"] body { background: #fff !important; color: #000 !important; }
}

/* =========================================================
   D2 — กฎเฉพาะหน้า (เพิ่มต่อท้ายตรงนี้ ทีละหมวด)
   ========================================================= */

/* ── D2.1 ตัวแปร Bootstrap เพิ่มเติม + พื้นฐาน ───────── */
html[data-theme="dark"] {
  --bs-emphasis-color: #fff;
  --bs-secondary-bg: #1b2740;
  --bs-tertiary-bg: #101a2e;
  --bs-tertiary-color: var(--muted);
  --bs-heading-color: var(--text);
  --bs-code-color: #f9a8d4;
  --bs-border-color-translucent: var(--border);
  --yd-dk-field-bd: #64748b;      /* ขอบช่องกรอก คอนทราสต์ 3.76:1 บน #3a3b3c (WCAG 1.4.11) */
  --yd-dk-ph: #a8abaf;            /* placeholder 5.74:1 บน #242526 */
  --yd-dk-hover: rgba(69, 153, 255, 0.14);
  --yd-dk-active: rgba(69, 153, 255, 0.22);
}
html[data-theme="dark"] ::selection { background: rgba(69, 153, 255, 0.4); color: #fff; }
html[data-theme="dark"] .bg-body,
html[data-theme="dark"] .bg-body-tertiary { background-color: var(--card) !important; }
html[data-theme="dark"] .bg-body-secondary { background-color: var(--bs-secondary-bg) !important; }
html[data-theme="dark"] .text-body { color: var(--text) !important; }
html[data-theme="dark"] .text-body-secondary,
html[data-theme="dark"] .text-body-tertiary { color: var(--muted) !important; }
html[data-theme="dark"] .text-primary { color: var(--primary) !important; }
html[data-theme="dark"] .text-danger { color: #fca5a5 !important; }
html[data-theme="dark"] .text-warning { color: #fcd34d !important; }
html[data-theme="dark"] .text-success { color: #8bbaff !important; }  /* ห้ามเขียว: สถานะบวกใช้น้ำเงิน */
html[data-theme="dark"] .text-info { color: #7dd3fc !important; }
html[data-theme="dark"] .border,
html[data-theme="dark"] .border-top,
html[data-theme="dark"] .border-bottom,
html[data-theme="dark"] .border-start,
html[data-theme="dark"] .border-end { border-color: var(--border) !important; }
html[data-theme="dark"] .shadow,
html[data-theme="dark"] .shadow-sm,
html[data-theme="dark"] .shadow-lg { box-shadow: 0 10px 26px rgba(0, 0, 0, 0.4) !important; }
html[data-theme="dark"] .text-bg-light { background-color: #1b2740 !important; color: var(--text) !important; }
html[data-theme="dark"] .text-bg-secondary { background-color: #334155 !important; color: #f1f5f9 !important; }
html[data-theme="dark"] .text-bg-dark { background-color: #18191a !important; color: var(--text) !important; }
html[data-theme="dark"] .text-bg-primary,
html[data-theme="dark"] .text-bg-success { background-color: #2374e1 !important; color: #fff !important; }
html[data-theme="dark"] .text-bg-info { background-color: #0e7490 !important; color: #fff !important; }
html[data-theme="dark"] .text-bg-warning { background-color: #b45309 !important; color: #fff !important; }
html[data-theme="dark"] .text-bg-danger { background-color: #b91c1c !important; color: #fff !important; }
html[data-theme="dark"] .badge.bg-light,
html[data-theme="dark"] .badge.bg-white { background-color: #1b2740 !important; color: var(--text) !important; }
html[data-theme="dark"] .badge.bg-secondary { background-color: #334155 !important; color: #f1f5f9 !important; }
html[data-theme="dark"] .badge.bg-success { background-color: #2374e1 !important; color: #fff !important; }
html[data-theme="dark"] .badge.bg-warning { background-color: #b45309 !important; color: #fff !important; }
html[data-theme="dark"] .badge.bg-danger { background-color: #b91c1c !important; color: #fff !important; }
html[data-theme="dark"] .badge.bg-info { background-color: #0e7490 !important; color: #fff !important; }

/* ── D2.2 ปุ่ม ───────────────────────────────────────── */
html[data-theme="dark"] .btn-outline-yd,
html[data-theme="dark"] .btn-light,
html[data-theme="dark"] .btn-white {
  background: rgba(255, 255, 255, 0.1); border-color: rgba(255, 255, 255, 0.35); color: var(--text);
}
html[data-theme="dark"] .btn-outline-yd:hover,
html[data-theme="dark"] .btn-light:hover,
html[data-theme="dark"] .btn-white:hover,
html[data-theme="dark"] .btn-outline-yd:focus-visible,
html[data-theme="dark"] .btn-light:focus-visible { background: var(--yd-dk-hover); border-color: rgba(69, 153, 255, 0.55); color: #fff; }
html[data-theme="dark"] .btn-outline-yd:active,
html[data-theme="dark"] .btn-light:active { background: var(--yd-dk-active); }
html[data-theme="dark"] .btn-secondary { background: #334155; border-color: #475569; color: #f1f5f9; }
html[data-theme="dark"] .btn-secondary:hover { background: #3f4e66; border-color: #5b6b85; color: #fff; }
html[data-theme="dark"] .btn-outline-secondary { border-color: rgba(255, 255, 255, 0.45); color: #cbd5e1; }
html[data-theme="dark"] .btn-outline-secondary:hover { background: rgba(255, 255, 255, 0.16); color: #fff; }
html[data-theme="dark"] .btn-outline-primary { border-color: rgba(69, 153, 255, 0.6); color: #8bbaff; }
html[data-theme="dark"] .btn-outline-primary:hover { background: #2374e1; border-color: #2374e1; color: #fff; }
html[data-theme="dark"] .btn-outline-danger { border-color: rgba(248, 113, 113, 0.6); color: #fca5a5; }
html[data-theme="dark"] .btn-outline-danger:hover { background: #b91c1c; border-color: #b91c1c; color: #fff; }
html[data-theme="dark"] .btn-outline-warning { border-color: rgba(251, 191, 36, 0.6); color: #fcd34d; }
html[data-theme="dark"] .btn-outline-warning:hover { background: #b45309; border-color: #b45309; color: #fff; }
html[data-theme="dark"] .btn-outline-success { border-color: rgba(69, 153, 255, 0.6); color: #8bbaff; }  /* ไม่ใช้เขียว */
html[data-theme="dark"] .btn-outline-success:hover { background: #2374e1; border-color: #2374e1; color: #fff; }
html[data-theme="dark"] .btn-link { color: var(--bs-link-color); }
html[data-theme="dark"] .btn:focus-visible { outline: 2px solid #4599ff; outline-offset: 2px; }
html[data-theme="dark"] .btn.disabled,
html[data-theme="dark"] .btn:disabled { opacity: 0.5; }

/* ── D2.3 nav-tabs / nav-pills / .yd-subnav ─────────── */
html[data-theme="dark"] .nav-tabs { border-bottom-color: var(--border); }
html[data-theme="dark"] .nav-tabs .nav-link { color: var(--muted); border-color: transparent; }
html[data-theme="dark"] .nav-tabs .nav-link:hover,
html[data-theme="dark"] .nav-tabs .nav-link:focus { color: var(--text); border-color: var(--border) var(--border) transparent; background: rgba(255, 255, 255, 0.06); }
html[data-theme="dark"] .nav-tabs .nav-link.active,
html[data-theme="dark"] .nav-tabs .nav-item.show .nav-link { background: var(--card); color: #8bbaff; border-color: var(--border) var(--border) var(--card); }
html[data-theme="dark"] .nav-pills .nav-link { color: var(--muted); }
html[data-theme="dark"] .nav-pills .nav-link:hover { color: var(--text); background: var(--yd-dk-hover); }
html[data-theme="dark"] .nav-pills .nav-link.active,
html[data-theme="dark"] .nav-pills .show > .nav-link { background: #2374e1; color: #fff; }
html[data-theme="dark"] .nav-link.disabled { color: #64748b; }
html[data-theme="dark"] .yd-subnav { background: var(--card); border-color: var(--border); box-shadow: 0 6px 18px rgba(0, 0, 0, 0.3); }
html[data-theme="dark"] .yd-subnav__item { color: var(--text); }
html[data-theme="dark"] .yd-subnav__item .bi { color: #8bbaff; }
html[data-theme="dark"] .yd-subnav__item:hover { color: #fff; background: var(--yd-dk-hover); border-color: rgba(69, 153, 255, 0.3); }
html[data-theme="dark"] .yd-subnav__item.is-active { color: #fff; box-shadow: 0 8px 18px rgba(0, 0, 0, 0.4); }
html[data-theme="dark"] .yd-subnav__item.is-active .bi { color: #fff; }
html[data-theme="dark"] .yd-subnav__item:focus-visible { outline-color: rgba(69, 153, 255, 0.7); }
html[data-theme="dark"] .yd-subnav__count { background: rgba(69, 153, 255, 0.18); color: #a5c8ff; }
html[data-theme="dark"] .yd-subnav__item.is-active .yd-subnav__count { background: rgba(255, 255, 255, 0.22); color: #fff; }

/* ── D2.4 pagination ────────────────────────────────── */
html[data-theme="dark"] .pagination { --bs-pagination-bg: var(--card); --bs-pagination-color: var(--text); --bs-pagination-border-color: var(--border); --bs-pagination-hover-bg: var(--yd-dk-hover); --bs-pagination-hover-color: #fff; --bs-pagination-hover-border-color: rgba(69, 153, 255, 0.4); --bs-pagination-focus-bg: var(--yd-dk-hover); --bs-pagination-focus-color: #fff; --bs-pagination-active-bg: #2374e1; --bs-pagination-active-border-color: #2374e1; --bs-pagination-active-color: #fff; --bs-pagination-disabled-bg: transparent; --bs-pagination-disabled-color: #64748b; --bs-pagination-disabled-border-color: var(--border); }
html[data-theme="dark"] .page-link { background: var(--card); color: var(--text); border-color: var(--border); }
html[data-theme="dark"] .page-link:hover { background: var(--yd-dk-hover); color: #fff; }
html[data-theme="dark"] .page-item.active .page-link { background: #2374e1; border-color: #2374e1; color: #fff; }
html[data-theme="dark"] .page-item.disabled .page-link { background: transparent; color: #64748b; }
html[data-theme="dark"] .yd-pager__meta { color: var(--muted); }
html[data-theme="dark"] .yd-pager__btn.btn-outline-yd { background: rgba(255, 255, 255, 0.1); color: var(--text); }
html[data-theme="dark"] .yd-pager__btn.btn-outline-yd:hover { background: var(--yd-dk-hover); }
html[data-theme="dark"] .yd-pager__btn.active[aria-current="page"] { background: #2374e1 !important; border-color: #2374e1 !important; color: #fff !important; }
html[data-theme="dark"] .yd-pager__arrow .bi { color: var(--text) !important; }

/* ── D2.5 accordion / alert / breadcrumb / progress / list-group ── */
html[data-theme="dark"] .accordion { --bs-accordion-bg: var(--card); --bs-accordion-color: var(--text); --bs-accordion-border-color: var(--border); --bs-accordion-btn-color: var(--text); --bs-accordion-btn-bg: var(--card); --bs-accordion-active-color: #8bbaff; --bs-accordion-active-bg: rgba(69, 153, 255, 0.12); --bs-accordion-btn-focus-box-shadow: 0 0 0 0.2rem rgba(69, 153, 255, 0.25); }
html[data-theme="dark"] .accordion-item { background: var(--card); border-color: var(--border); color: var(--text); }
html[data-theme="dark"] .accordion-button { background: var(--card); color: var(--text); }
html[data-theme="dark"] .accordion-button:not(.collapsed) { background: rgba(69, 153, 255, 0.12); color: #8bbaff; box-shadow: inset 0 -1px 0 var(--border); }
html[data-theme="dark"] .accordion-button::after { filter: invert(1) brightness(1.6); }
html[data-theme="dark"] .accordion-body { color: var(--text); }
html[data-theme="dark"] .alert { border-color: var(--border); }
html[data-theme="dark"] .alert-primary,
html[data-theme="dark"] .alert-info,
html[data-theme="dark"] .alert-success { background: rgba(59, 130, 246, 0.14); border-color: rgba(59, 130, 246, 0.38); color: #cfe0ff; }
html[data-theme="dark"] .alert-warning { background: rgba(245, 158, 11, 0.14); border-color: rgba(245, 158, 11, 0.4); color: #fde68a; }
html[data-theme="dark"] .alert-danger { background: rgba(239, 68, 68, 0.15); border-color: rgba(239, 68, 68, 0.42); color: #fecaca; }
html[data-theme="dark"] .alert-secondary,
html[data-theme="dark"] .alert-light,
html[data-theme="dark"] .alert-dark { background: rgba(255, 255, 255, 0.1); border-color: var(--border); color: var(--text); }
html[data-theme="dark"] .alert a:not(.btn) { color: inherit; text-decoration: underline; }
html[data-theme="dark"] .alert-link { color: #fff; }
html[data-theme="dark"] .breadcrumb { --bs-breadcrumb-divider-color: var(--muted); --bs-breadcrumb-item-active-color: var(--muted); }
html[data-theme="dark"] .breadcrumb-item a { color: #8bbaff; }
html[data-theme="dark"] .breadcrumb-item.active { color: var(--muted); }
html[data-theme="dark"] .progress { background-color: rgba(255, 255, 255, 0.18); }
html[data-theme="dark"] .progress-bar { background-color: #2374e1; color: #fff; }
html[data-theme="dark"] .list-group { --bs-list-group-bg: var(--card); --bs-list-group-color: var(--text); --bs-list-group-border-color: var(--border); --bs-list-group-action-hover-bg: var(--yd-dk-hover); --bs-list-group-action-hover-color: #fff; --bs-list-group-action-active-bg: var(--yd-dk-active); --bs-list-group-action-active-color: #fff; --bs-list-group-active-bg: #2374e1; --bs-list-group-active-border-color: #2374e1; --bs-list-group-disabled-bg: rgba(255, 255, 255, 0.06); --bs-list-group-disabled-color: #64748b; }
html[data-theme="dark"] .list-group-item-action { color: var(--text); }
html[data-theme="dark"] .list-group-item-action:hover,
html[data-theme="dark"] .list-group-item-action:focus { background: var(--yd-dk-hover); color: #fff; }
html[data-theme="dark"] .list-group-item.active { background: #2374e1; border-color: #2374e1; color: #fff; }

/* ── D2.6 tooltip / code / pre / ตาราง Bootstrap ปกติ ── */
html[data-theme="dark"] .tooltip { --bs-tooltip-bg: #e4e6eb; --bs-tooltip-color: #18191a; }
html[data-theme="dark"] .popover { --bs-popover-bg: var(--card); --bs-popover-border-color: var(--border); --bs-popover-header-bg: rgba(255, 255, 255, 0.1); --bs-popover-header-color: var(--text); --bs-popover-body-color: var(--text); --bs-popover-arrow-border: var(--border); }
html[data-theme="dark"] code { color: #f9a8d4; background: rgba(255, 255, 255, 0.1); }
html[data-theme="dark"] pre,
html[data-theme="dark"] pre code { background: #18191a; color: #dbe5f5; border-color: var(--border); }
html[data-theme="dark"] pre { border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px; }
html[data-theme="dark"] pre code { background: transparent; padding: 0; }
html[data-theme="dark"] kbd { background: #334155; color: #f1f5f9; }
html[data-theme="dark"] .table > :not(caption) > * > * { border-bottom-color: var(--border); }
html[data-theme="dark"] .table > thead > tr > th { color: var(--muted); border-bottom-color: rgba(255, 255, 255, 0.3); }
html[data-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd) > * { background-color: rgba(255, 255, 255, 0.05); color: var(--text); }
html[data-theme="dark"] .table-hover > tbody > tr:hover > * { background-color: rgba(255, 255, 255, 0.09); color: var(--text); }
html[data-theme="dark"] .table-light,
html[data-theme="dark"] .table-light > th,
html[data-theme="dark"] .table-light > td,
html[data-theme="dark"] .table > thead.table-light > tr > th { --bs-table-bg: #1b2740; --bs-table-color: var(--text); background-color: #1b2740; color: var(--text); border-color: var(--border); }
html[data-theme="dark"] .table-dark { --bs-table-bg: #18191a; --bs-table-color: var(--text); }
html[data-theme="dark"] .table-yd tbody tr:hover td { background: rgba(255, 255, 255, 0.08); }

/* ── D2.7 scrollbar ─────────────────────────────────── */
html[data-theme="dark"] { scrollbar-color: #475569 #18191a; }
html[data-theme="dark"] ::-webkit-scrollbar { width: 11px; height: 11px; }
html[data-theme="dark"] ::-webkit-scrollbar-track { background: #18191a; }
html[data-theme="dark"] ::-webkit-scrollbar-thumb { background: #475569; border-radius: 8px; border: 2px solid #18191a; }
html[data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: #64748b; }
html[data-theme="dark"] ::-webkit-scrollbar-corner { background: #18191a; }

/* ── D2.8 .yd-toolbar / .yd-sec / .yd-savebar / .yd-empty ── */
html[data-theme="dark"] .yd-toolbar { background: rgba(255, 255, 255, 0.07); border-color: var(--border); }
html[data-theme="dark"] .yd-toolbar .form-label { color: var(--muted); }
html[data-theme="dark"] .yd-sec { background: var(--card); border-color: var(--border); box-shadow: 0 10px 26px rgba(0, 0, 0, 0.35); }
html[data-theme="dark"] .yd-sec__head { border-color: var(--border); }
html[data-theme="dark"] .yd-sec__ic { box-shadow: 0 8px 18px rgba(0, 0, 0, 0.4); }
html[data-theme="dark"] .yd-sec__title { color: var(--text); }
html[data-theme="dark"] .yd-sec__sub { color: var(--muted); }
html[data-theme="dark"] .yd-sec__count { background: rgba(69, 153, 255, 0.16); color: #a5c8ff; }
html[data-theme="dark"] .yd-savebar { background: rgba(36, 37, 38, 0.95); border-color: rgba(69, 153, 255, 0.28); box-shadow: 0 14px 34px rgba(0, 0, 0, 0.5); }
html[data-theme="dark"] .yd-savebar__hint { color: var(--muted); }
html[data-theme="dark"] .yd-savebar__hint .bi { color: #fcd34d; }
html[data-theme="dark"] .yd-empty { border-style: dashed; }
html[data-theme="dark"] .yd-empty .bi { color: #8bbaff; }

/* ── D2.9 .yd-dd (dropdown ธีมเว็บที่ app.js แปลงจาก select) ── */
html[data-theme="dark"] .yd-dd-btn { background: #3a3b3c !important; border-color: var(--yd-dk-field-bd) !important; color: var(--text) !important; }
html[data-theme="dark"] .yd-dd-btn:hover { background: #142038 !important; border-color: #4599ff !important; }
html[data-theme="dark"] .yd-dd.open .yd-dd-btn,
html[data-theme="dark"] .yd-dd-btn:focus-visible { border-color: #4599ff !important; box-shadow: 0 0 0 0.2rem rgba(69, 153, 255, 0.22) !important; }
html[data-theme="dark"] .yd-dd .bi,
html[data-theme="dark"] .yd-dd .yd-dd-menu .yd-dd-item .bi { color: #8bbaff; }
html[data-theme="dark"] .yd-dd-label { color: inherit; }
html[data-theme="dark"] .yd-dd-menu { background: var(--card); border-color: rgba(255, 255, 255, 0.3); box-shadow: 0 18px 40px rgba(0, 0, 0, 0.55); }
html[data-theme="dark"] .yd-dd-item { color: var(--text); }
html[data-theme="dark"] .yd-dd-item:hover { background: var(--yd-dk-hover); color: #fff; }
html[data-theme="dark"] .yd-dd-item.active { background: var(--yd-dk-active); border-color: rgba(69, 153, 255, 0.4); color: #fff; }
html[data-theme="dark"] .yd-dd-item:disabled { color: #64748b; opacity: 1; }
html[data-theme="dark"] .yd-dd.yd-dd-disabled .yd-dd-btn { opacity: 0.55; }

/* ── D2.10 SweetAlert2 / modal .yd-announce* ────────── */
html[data-theme="dark"] .swal2-popup.yd-swal { background: var(--card) !important; border-color: var(--border) !important; color: var(--text); }
html[data-theme="dark"] .swal2-title { color: var(--text) !important; }
html[data-theme="dark"] .swal2-html-container,
html[data-theme="dark"] .swal2-content { color: #cbd5e1 !important; }
html[data-theme="dark"] .swal2-input,
html[data-theme="dark"] .swal2-textarea,
html[data-theme="dark"] .swal2-select { background: #3a3b3c; border-color: var(--yd-dk-field-bd); color: var(--text); box-shadow: none; }
html[data-theme="dark"] .swal2-input:focus,
html[data-theme="dark"] .swal2-textarea:focus { border-color: #4599ff; box-shadow: 0 0 0 0.2rem rgba(69, 153, 255, 0.22); }
html[data-theme="dark"] .swal2-input::placeholder,
html[data-theme="dark"] .swal2-textarea::placeholder { color: var(--yd-dk-ph); }
html[data-theme="dark"] .swal2-validation-message { background: rgba(239, 68, 68, 0.15); color: #fecaca; }
html[data-theme="dark"] .swal2-footer { border-top-color: var(--border); color: var(--muted); }
html[data-theme="dark"] .swal2-close { color: var(--muted); }
html[data-theme="dark"] .swal2-close:hover { color: #fff; background: transparent; }
html[data-theme="dark"] .swal2-icon.swal2-info,
html[data-theme="dark"] .swal2-icon.swal2-question,
html[data-theme="dark"] .swal2-icon.swal2-warning { border-color: #4599ff !important; color: #4599ff !important; }
html[data-theme="dark"] .swal2-popup .btn-outline-yd { background: rgba(255, 255, 255, 0.1); color: var(--text); }
html[data-theme="dark"] .swal2-popup .btn-brand-yd { background: #2374e1 !important; border-color: rgba(69, 153, 255, 0.4); }
html[data-theme="dark"] .swal2-popup .btn-danger,
html[data-theme="dark"] .swal2-popup .swal2-deny { background: #b91c1c; color: #fff; }
html[data-theme="dark"] .yd-announce-modal .modal-content { background: var(--card); }
html[data-theme="dark"] .yd-announce__title { color: var(--text); }
html[data-theme="dark"] .yd-announce__subtitle,
html[data-theme="dark"] .yd-announce__body .small-muted,
html[data-theme="dark"] .yd-announce__footer .form-check-label { color: var(--muted); }
html[data-theme="dark"] .yd-announce__body { border-top-color: var(--border); color: var(--text); }
html[data-theme="dark"] .yd-announce__icon { background: rgba(239, 68, 68, 0.16); border-color: rgba(239, 68, 68, 0.35); }
html[data-theme="dark"] .yd-announce__icon--danger i { color: #fca5a5; }
html[data-theme="dark"] .yd-announce__icon--brand,
html[data-theme="dark"] .yd-announce__icon--info,
html[data-theme="dark"] .yd-announce__icon--success { background: rgba(59, 130, 246, 0.18); border-color: rgba(69, 153, 255, 0.4); }
html[data-theme="dark"] .yd-announce__icon--brand i,
html[data-theme="dark"] .yd-announce__icon--info i,
html[data-theme="dark"] .yd-announce__icon--success i { color: #8bbaff; }
html[data-theme="dark"] .yd-announce__icon--warning { background: rgba(245, 158, 11, 0.16); border-color: rgba(245, 158, 11, 0.4); }
html[data-theme="dark"] .yd-announce__icon--warning i { color: #fcd34d; }

/* ── D2.11 ช่องกรอก: ขอบ/placeholder ผ่านคอนทราสต์ ─────── */
html[data-theme="dark"] .form-control,
html[data-theme="dark"] .form-select,
html[data-theme="dark"] .input-group-text,
html[data-theme="dark"] textarea,
html[data-theme="dark"] select { border-color: var(--yd-dk-field-bd) !important; }
html[data-theme="dark"] .form-control::placeholder,
html[data-theme="dark"] textarea::placeholder,
html[data-theme="dark"] input::placeholder { color: var(--yd-dk-ph); opacity: 1; }
html[data-theme="dark"] .input-group-text { color: var(--muted) !important; }
html[data-theme="dark"] .input-group > .form-control:focus,
html[data-theme="dark"] .input-group > .form-select:focus { position: relative; z-index: 3; }
html[data-theme="dark"] .form-select { --bs-form-select-bg-img: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%2394a3b8' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e"); }
html[data-theme="dark"] .form-control::file-selector-button { background: #1b2740; color: var(--text); border-color: var(--border); }
html[data-theme="dark"] .form-control:hover:not(:disabled):not([readonly])::file-selector-button { background: #243352; }
html[data-theme="dark"] .form-text { color: var(--muted); }
html[data-theme="dark"] .form-label { color: var(--text); }
html[data-theme="dark"] .form-check-label { color: var(--text); }
html[data-theme="dark"] .form-check-input:focus { box-shadow: 0 0 0 0.2rem rgba(69, 153, 255, 0.25); border-color: #4599ff; }
html[data-theme="dark"] .form-switch .form-check-input:not(:checked) { --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%2394a3b8'/%3e%3c/svg%3e"); }
html[data-theme="dark"] .invalid-feedback { color: #fca5a5; }
html[data-theme="dark"] .form-control.is-invalid,
html[data-theme="dark"] .form-select.is-invalid { border-color: #f87171 !important; }

/* ── D2.12 mobile_nav (.ydm-*) + navbar ─────────────── */
html[data-theme="dark"] .ydm-bar { background: rgba(36, 37, 38, 0.97) !important; border-top-color: var(--border) !important; box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.45); }
html[data-theme="dark"] .ydm-tab { color: var(--muted); }
html[data-theme="dark"] .ydm-tab.is-active { color: #8bbaff; }
html[data-theme="dark"] .ydm-backdrop { background: rgba(2, 6, 14, 0.7); }
html[data-theme="dark"] .ydm-sheet { background: var(--card) !important; border-color: var(--border); box-shadow: 0 -18px 40px rgba(0, 0, 0, 0.55); }
html[data-theme="dark"] .ydm-sheet__grab { background: rgba(255, 255, 255, 0.4); }
html[data-theme="dark"] .ydm-sheet__t { color: var(--text); }
html[data-theme="dark"] .ydm-sheet__s { color: var(--muted); }
html[data-theme="dark"] .ydm-sheet__x { background: rgba(255, 255, 255, 0.14); color: var(--text); }
html[data-theme="dark"] .ydm-sheet__x:active { background: rgba(255, 255, 255, 0.28); }
html[data-theme="dark"] .ydm-card__label { color: var(--text); }
html[data-theme="dark"] .ydm-card__cap { color: var(--muted); }
html[data-theme="dark"] .ydm-card__ico { background: rgba(69, 153, 255, 0.16); color: #8bbaff; }
html[data-theme="dark"] .ydm-card.is-active { background: #2374e1 !important; border-color: #2374e1 !important; }
html[data-theme="dark"] .ydm-card.is-active .ydm-card__label { color: #fff; }
html[data-theme="dark"] .ydm-card.is-active .ydm-card__cap { color: rgba(255, 255, 255, 0.85); }
html[data-theme="dark"] .ydm-as__label,
html[data-theme="dark"] .ydm-as__chev,
html[data-theme="dark"] .ydm-as__row-switch { color: var(--muted); }
html[data-theme="dark"] .ydm-as__name,
html[data-theme="dark"] .ydm-as__row-name { color: var(--text); }
html[data-theme="dark"] .ydm-as__row-check { color: #8bbaff; }
html[data-theme="dark"] .ydm-as__btn--primary { background: rgba(69, 153, 255, 0.18); color: #a5c8ff; }
html[data-theme="dark"] .navbar-yd .navbar-brand,
html[data-theme="dark"] .navbar-yd .nav-link,
html[data-theme="dark"] .navbar-yd .btn-link { color: var(--text); }
html[data-theme="dark"] .navbar-yd .nav-link:hover { color: #fff; }
html[data-theme="dark"] .navbar-yd .bi { color: #8bbaff; }
html[data-theme="dark"] .navbar-yd .navbar-toggler { border-color: var(--border); }
html[data-theme="dark"] .navbar-yd .navbar-toggler-icon { filter: invert(1) brightness(1.8); }
html[data-theme="dark"] .navbar-yd .dropdown-menu { background: var(--card); border-color: var(--border); }
html[data-theme="dark"] .dropdown-divider { border-top-color: var(--border); }
html[data-theme="dark"] .dropdown-header { color: var(--muted); }
html[data-theme="dark"] .dropdown-item.active,
html[data-theme="dark"] .dropdown-item:active { background: #2374e1; color: #fff; }
html[data-theme="dark"] .dropdown-item.disabled { color: #64748b; }
html[data-theme="dark"] .yd-noti-badge { box-shadow: 0 0 0 2px var(--card); }

/* ── D2.13 แก้จากการถ่ายภาพจริงด้วย Chrome (sidebar · dock · ป้ายสถานะ · login · พื้นหลัง) ── */
/* ===== DARK FIXES (วางต่อท้าย assets/css/dark.css) ===== */

/* ── 1) Sidebar: หัวหมวด · ไอคอนเมนู · hover/active ───────── */
html[data-theme="dark"] .yd-sidebar .yd-sb-head { color: var(--muted); }
html[data-theme="dark"] .yd-sidebar .yd-sb-admin .yd-sb-head { color: #8bbaff; }
html[data-theme="dark"] .yd-sidebar .yd-sb-ico { background: rgba(69, 153, 255, 0.14); color: #8bbaff; }
html[data-theme="dark"] .yd-sidebar .yd-sb-link:hover { background: rgba(69, 153, 255, 0.1); }
html[data-theme="dark"] .yd-sidebar .yd-sb-link.is-active { background: #2374e1; color: #fff; box-shadow: 0 8px 22px rgba(0, 0, 0, 0.35); }
html[data-theme="dark"] .yd-sidebar .yd-sb-link.is-active .yd-sb-ico { background: rgba(255, 255, 255, 0.2); color: #fff; }
html[data-theme="dark"] .yd-sidebar .yd-sb-admin .yd-sb-ico { background: #2374e1; color: #fff; box-shadow: none; }
html[data-theme="dark"] .yd-sidebar .yd-sb-admin .yd-sb-link:hover { background: rgba(69, 153, 255, 0.12); }
html[data-theme="dark"] .yd-sidebar .yd-sb-admin .yd-sb-link.is-active { background: #2374e1; }

/* ── 2) Account Dock ───────────────────────────────────── */
html[data-theme="dark"] .yd-sidebar .yd-dock__qhead { color: var(--text); }
html[data-theme="dark"] .yd-sidebar .yd-dock__q b { color: var(--muted); }
html[data-theme="dark"] .yd-sidebar .yd-dock__q span { color: var(--muted); }
html[data-theme="dark"] .yd-sidebar .yd-dock__q.is-hot b { color: #fbbf24; }
html[data-theme="dark"] .yd-sidebar .yd-dock__q:hover { background: rgba(69, 153, 255, 0.16) !important; }
html[data-theme="dark"] .yd-sidebar .yd-dock__q.is-hot { background: rgba(245, 158, 11, 0.14) !important; }
html[data-theme="dark"] .yd-sidebar .yd-dock__txt small { color: var(--muted); }
html[data-theme="dark"] .yd-sidebar .yd-dock__chev { color: var(--muted); }
html[data-theme="dark"] .yd-sidebar .yd-dock__av:not([style*="background-image"]),
html[data-theme="dark"] .yd-sidebar .yd-dock__ico { background: rgba(69, 153, 255, 0.16); color: #8bbaff; }
html[data-theme="dark"] .yd-sidebar .yd-dock__ico.is-warn { background: rgba(245, 158, 11, 0.18); color: #fbbf24; }
html[data-theme="dark"] .yd-sidebar a.yd-dock__card:hover { border-color: rgba(69, 153, 255, 0.4) !important; }
html[data-theme="dark"] .yd-sidebar .yd-dock__logout:hover { background: rgba(239, 68, 68, 0.16) !important; border-color: rgba(239, 68, 68, 0.4) !important; color: #fca5a5 !important; }

/* ── 3) ป้ายสถานะ .yd-badge / .yd-pill: พื้นมืด + ตัวหนังสือสว่างตามโทน ── */
html[data-theme="dark"] .yd-badge,
html[data-theme="dark"] .yd-pill,
html[data-theme="dark"] .aff-status-badge,
html[data-theme="dark"] .yd-status-pill {
  --ydb-bg: linear-gradient(135deg, color-mix(in srgb, var(--ydb-g2) 34%, #18191a), color-mix(in srgb, var(--ydb-g2) 18%, #18191a) 70%);
  --ydb-bd: color-mix(in srgb, var(--ydb-g3) 40%, transparent);
}
html[data-theme="dark"] .yd-badge.yd-badge-ok,
html[data-theme="dark"] .yd-badge.yd-badge-live,
html[data-theme="dark"] .yd-pill.yes,
html[data-theme="dark"] .yd-pill.yd-pill-success,
html[data-theme="dark"] .aff-status-badge.aff-status-badge--success,
html[data-theme="dark"] .yd-status-pill.yd-status--approved { --ydb-fg: #8bbaff; --ydb-g1: #1d5fd1; --ydb-g2: #3b82f6; --ydb-g3: #4599ff; }
html[data-theme="dark"] .yd-badge.yd-badge-draft,
html[data-theme="dark"] .aff-status-badge.aff-status-badge--info { --ydb-fg: #7dd3fc; }
html[data-theme="dark"] .yd-badge.yd-badge-warn,
html[data-theme="dark"] .yd-pill.warn,
html[data-theme="dark"] .yd-pill.yd-pill-warning,
html[data-theme="dark"] .aff-status-badge.aff-status-badge--warning,
html[data-theme="dark"] .yd-status-pill.yd-status--pending { --ydb-fg: #fcd34d; }
html[data-theme="dark"] .yd-badge.yd-badge-danger,
html[data-theme="dark"] .yd-pill.no,
html[data-theme="dark"] .aff-status-badge.aff-status-badge--danger,
html[data-theme="dark"] .yd-status-pill.yd-status--rejected,
html[data-theme="dark"] .yd-badge.text-danger { --ydb-fg: #fca5a5; }
html[data-theme="dark"] .yd-badge.yd-badge-muted,
html[data-theme="dark"] .yd-badge[data-ui-key="draft"] { --ydb-fg: #cbd5e1; }
/* ป้ายที่วางใน hero/พื้นน้ำเงิน: เดิมเป็น pill ขาว (--ydb-bg:#fff) → ใช้ pill มืดให้เหมือนกันทั้งระบบ */
html[data-theme="dark"]:root body :is([class*="hero"], .yd-ud-id__body, .yd-ud-actions, .list-group-item.active) .yd-badge,
html[data-theme="dark"]:root body .yd-bhero__status > .yd-badge,
html[data-theme="dark"]:root body .rvp-hero__status > .yd-badge,
html[data-theme="dark"]:root body .list-group-item.active .yd-status-pill {
  --ydb-bg: linear-gradient(135deg, color-mix(in srgb, var(--ydb-g2) 34%, #18191a), color-mix(in srgb, var(--ydb-g2) 18%, #18191a) 70%);
  --ydb-bd: color-mix(in srgb, var(--ydb-g3) 40%, transparent);
  box-shadow: none;
}

/* ── 4) Subnav count สีอำพัน (dark_auto ตั้ง #92400e + พื้น #fde68a !important) ── */
html[data-theme="dark"] .yd-subnav__count.adf-count--warn { color: #fcd34d !important; background-color: rgba(245, 158, 11, 0.2) !important; }
html[data-theme="dark"] .yd-subnav__item.is-active .yd-subnav__count.adf-count--warn { color: #fff !important; background: rgba(245, 158, 11, 0.45) !important; }

/* ── 5) หน้า login: โลโก้ hero (รูปน้ำเงิน) จมบนพื้นมืด ── */
html[data-theme="dark"] .yd-auth-hero__img { filter: brightness(0) invert(1) drop-shadow(0 18px 40px rgba(0, 0, 0, 0.5)); }

/* ── 6) พื้นหลังหน้า: กฎ body !important จาก dark_auto (promo_links/license/howto_preview) ทำให้พื้นแบนเป็นเทากลาง ── */
html[data-theme="dark"] body {
  background:
    radial-gradient(1200px 800px at 8% 10%, rgba(59, 130, 246, 0.1), transparent 55%),
    radial-gradient(900px 700px at 86% 18%, rgba(14, 165, 233, 0.07), transparent 55%),
    linear-gradient(180deg, var(--bg0), var(--bg1)) !important;
  background-color: var(--bg0) !important;
  color: var(--text) !important;
}
html[data-theme="dark"] .yd-sidebar .yd-dock__chev { color: var(--muted) !important; }
html[data-theme="dark"] .yd-social-btn--google .yd-social-btn__label,
html[data-theme="dark"] .yd-social-btn--google { color: var(--text) !important; }

/* ── D2.14 แก้จากการตรวจรอบสุดท้าย: ไอคอนคอนทราสต์ต่ำ ── */
html[data-theme="dark"] .yd-dock__ico.is-warn,
html[data-theme="dark"] .yd-dock__ico.is-warn i { color: #fbbf24 !important; }
html[data-theme="dark"] .dropdown-item.active i,
html[data-theme="dark"] .dropdown-item.is-active i,
html[data-theme="dark"] .dropdown-item[aria-current="true"] i { color: #fff !important; }
html[data-theme="dark"] .rls-sec__ic i { color: #fff !important; }

/* ── D2.15 ตัวแปรสีเฉพาะโหมดมืดสำหรับสีฝังใน view ── */
html[data-theme="dark"] {
  --dk-text: var(--text);
  --dk-muted: var(--muted);
  --dk-card: var(--card);
  --dk-soft: var(--soft);
  --dk-border: var(--border);
  --dk-shadow: var(--shadow);
  --dk-radius: var(--radius);
  --dk-radius2: var(--radius2);
}

/* ── D2.16 หน้า Dashboard: .yd-dash นิยาม --text/--muted/--border/--soft ใหม่ที่ตัวมันเอง (ชนะค่าที่สืบทอดจาก <html>) → ต้องทับที่ scope เดียวกัน ── */
html[data-theme="dark"] .yd-dash {
  --text: #e4e6eb;
  --muted: #b0b3b8;
  --border: rgba(255, 255, 255, 0.12);
  --soft: rgba(255, 255, 255, 0.06);
  --brand-2: rgba(69, 153, 255, 0.14);
}
/* หัวเพจโหมดสว่าง (is-light) — กฎ gradient ขาวของหน้า ตัวสร้างอัตโนมัติไม่แตะ */
html[data-theme="dark"] .yd-admin-hero.is-light {
  background: linear-gradient(135deg, #2c2d2e 0%, #262728 55%, #18191a 100%) !important;
  border-color: rgba(69, 153, 255, 0.22) !important;
  box-shadow: 0 20px 46px rgba(0, 0, 0, 0.4) !important;
}
html[data-theme="dark"] .yd-admin-hero.is-light .yd-admin-hero__title { color: var(--text) !important; }
html[data-theme="dark"] .yd-admin-hero.is-light .yd-admin-hero__eyebrow,
html[data-theme="dark"] .yd-admin-hero.is-light .yd-admin-hero__sub { color: var(--muted) !important; }

/* ── ปุ่มสลับสว่าง/มืดในแถบบน: พระจันทร์ตอนสว่าง · ดวงอาทิตย์ตอนมืด ── */
.yd-theme-toggle { width: 42px; height: 42px; padding: 0 !important; display: inline-flex !important; align-items: center; justify-content: center; border-radius: 999px !important; }
.yd-theme-toggle .bi { font-size: 18px; color: var(--primary); }
.yd-theme-toggle__sun { display: none; }
html[data-theme="dark"] .yd-theme-toggle__sun { display: inline-block; color: var(--fb-text) !important; }
html[data-theme="dark"] .yd-theme-toggle__moon { display: none; }
.yd-theme-toggle:focus-visible { outline: 2px solid #4599ff; outline-offset: 2px; }