/* ============================================
   HotelJob - Theme & Design System
   CSS Variables, Dark Mode, Typography, Base
   ============================================ */

/* --- Google Fonts Import --- */
@import url('https://fonts.googleapis.com/css2?family=Anuphan:wght@300;400;500;600;700&family=Red+Hat+Display:wght@400;500;600;700;800&display=swap');

/* ============================================
   CSS Custom Properties (Light Mode Default)
   ============================================ */
:root {
  /* --- Brand Colors (HotelJob CI Blue) --- */
  --clr-primary:        #0071E3;          /* brand seed — matches main site */
  --clr-primary-light:  #2B8AFF;
  --clr-primary-dark:   #005FBF;
  --clr-primary-darker: #004A99;
  /* 2026-05-25: neutralized — was rgba(0,113,227,.08) ทำให้ทุก hover/active ทั่ว site ดูฟ้า */
  --clr-primary-subtle:        rgba(0,0,0,.04);
  --clr-primary-subtle-solid:  #F4F4F4;
  --clr-primary-50:     #E8F2FD;
  --clr-primary-100:    #C5DEF9;
  --clr-primary-200:    #9CC4F3;
  --clr-primary-300:    #6BA5EC;
  --clr-primary-400:    #3387E5;
  --clr-primary-500:    #0071E3;
  --clr-primary-600:    #005FBF;
  --clr-primary-700:    #004A99;
  --clr-primary-800:    #003B7A;
  --clr-primary-900:    #002B5C;

  --clr-accent: #F59E0B;
  --clr-accent-dark: #D97706;
  --clr-accent-subtle: #FFFBEB;

  --clr-success: #22C55E;
  --clr-success-light: #4ADE80;
  --clr-success-subtle: #F0FDF4;

  --clr-danger: #EF4444;
  --clr-danger-light: #F87171;
  --clr-danger-subtle: #FEF2F2;

  --clr-warning: #F59E0B;
  --clr-warning-light: #FBBF24;
  --clr-warning-subtle: #FFFBEB;

  --clr-info: #3B82F6;
  --clr-info-subtle: #EFF6FF;

  /* --- Neutrals --- */
  --clr-white: #ffffff;
  --clr-gray-50: #F9F9F9;
  --clr-gray-100: #F3F3F3;
  --clr-gray-200: #E5E5E5;
  --clr-gray-300: #D1D5DB;
  --clr-gray-400: #9CA3AF;
  --clr-gray-500: #6B7280;
  --clr-gray-600: #4B5563;
  --clr-gray-700: #374151;
  --clr-gray-800: #1F2937;
  --clr-gray-900: #111827;
  --clr-black: #000000;

  /* --- Semantic Colors --- */
  --clr-bg: #FFFFFF; /* 2026-05-25: page bg เป็นขาว ตามคำขอ HR */
  --clr-bg-card: #ffffff;
  --clr-bg-sidebar: #1B1F27;
  --clr-bg-header: #ffffff;
  --clr-bg-footer: #1B1F27;
  --clr-bg-input: #ffffff;
  --clr-bg-hover: #F3F3F3;
  --clr-bg-active: rgba(0, 0, 0, 0.05); /* 2026-05-25: neutralized — was brand-blue overlay */
  --clr-bg-sunken: #F0F0F0;

  --clr-text: #111827;
  --clr-text-secondary: #6B7280;
  --clr-text-muted: #9CA3AF;
  --clr-text-inverse: #ffffff;
  --clr-text-link: #0071E3;

  --clr-border: #D4D4D4; /* 2026-05-25: global border มาตรฐานเดียวกับ dashboard */
  --clr-border-light: #F3F3F3;
  --clr-divider: #E5E5E5;

  /* --- Shadows --- */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.04), 0 2px 4px rgba(0, 0, 0, 0.03);
  --shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.06), 0 4px 10px rgba(0, 0, 0, 0.03);
  --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.05);
  --shadow-card-hover: 0 8px 25px rgba(0, 0, 0, 0.08);

  /* --- Typography --- */
  --font-thai: 'Anuphan', sans-serif;
  --font-en: 'Anuphan', sans-serif;
  --font-body: var(--font-thai);
  --font-heading: var(--font-thai);
  --font-mono: 'SF Mono', 'Fira Code', monospace;
  --font-logo: 'Red Hat Display', sans-serif;

  --fs-xs: 0.875rem;    /* 14px */
  --fs-sm: 0.875rem;    /* 14px */
  --fs-base: 1rem;      /* 16px */
  --fs-md: 1.0625rem;   /* 17px */
  --fs-lg: 1.1875rem;   /* 19px */
  --fs-xl: 1.3125rem;   /* 21px */
  --fs-2xl: 1.5rem;     /* 24px */
  --fs-3xl: 1.875rem;   /* 30px */
  --fs-4xl: 2.25rem;    /* 36px */

  --fw-light: 300;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  --lh-tight: 1.25;
  --lh-normal: 1.5;
  --lh-relaxed: 1.75;

  /* --- Spacing --- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;

  /* --- Borders --- */
  --radius-sm: 0.5rem;
  --radius-md: 0.75rem;
  --radius-lg: 1rem;
  --radius-xl: 1.25rem;
  --radius-full: 9999px;

  /* --- Layout --- */
  --sidebar-width: 260px;
  --sidebar-collapsed-width: 72px;
  --header-height: 64px;
  --footer-height: auto;

  /* --- Transitions --- */
  --transition-fast: 150ms ease;
  --transition-base: 250ms ease;
  --transition-slow: 350ms ease;

  /* --- Z-Index --- */
  --z-sidebar: 1040;
  --z-header: 1030;
  --z-overlay: 1050;
  --z-modal: 1060;
  --z-tooltip: 1070;
}

/* ============================================
   Dark Mode
   ============================================ */
[data-theme="dark"] {
  --clr-bg: #0F1117;
  --clr-bg-card: #1A1D26;
  --clr-bg-sidebar: #0F1117;
  --clr-bg-header: #1A1D26;
  --clr-bg-footer: #0F1117;
  --clr-bg-input: #1A1D26;
  --clr-bg-hover: #24272F;
  --clr-bg-active: rgba(0, 113, 227, 0.18);
  --clr-bg-sunken: #14161E;

  --clr-primary-subtle: rgba(0, 113, 227, 0.18);
  --clr-primary-subtle-solid: #0A1F3A;
  --clr-accent-subtle: rgba(245, 158, 11, 0.1);
  --clr-success-subtle: rgba(34, 197, 94, 0.12);
  --clr-danger-subtle: rgba(239, 68, 68, 0.12);
  --clr-warning-subtle: rgba(245, 158, 11, 0.12);
  --clr-info-subtle: rgba(59, 130, 246, 0.12);

  --clr-text: #F3F3F3;
  --clr-text-secondary: #9CA3AF;
  --clr-text-muted: #6B7280;
  --clr-text-inverse: #0F1117;
  --clr-text-link: #2B8AFF;

  --clr-border: #2A2D36;
  --clr-border-light: #1F222B;
  --clr-divider: #2A2D36;

  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.5);
  --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.3);
  --shadow-card-hover: 0 8px 25px rgba(0, 0, 0, 0.4);
}

/* ============================================
   Dark mode — Canonical palette (--dk-*) · single source of truth (2026-06-16)
   ─────────────────────────────────────────────
   ค่ามาตรฐานของ dark mode ทั้ง site อยู่ที่นี่ที่เดียว → tune ที่นี่มีผลทุกหน้า
   แต่ละหน้านิยาม palette เป็นชื่อ token ของตัวเอง (--canvas/--surface/--ink...)
   ด้วย "ความหมายต่างกัน" → ไฟล์ dark.css จะ map token ของแต่ละหน้า → --dk-* ให้ตรงความหมาย
   (เช่น billing --canvas = พื้นหลังหน้า → var(--dk-bg) · dashboard --canvas = ชิป → var(--dk-chip))
   ============================================ */
[data-theme="dark"] {
  /* surfaces */
  --dk-bg:        #0F1117;   /* พื้นหลังหน้า */
  --dk-card:      #1A1D26;   /* การ์ด/surface หลัก */
  --dk-card-2:    #21242F;   /* surface ยกระดับ/ซ้อน */
  --dk-sunken:    #14161E;   /* wash/พื้นจม/row hover */
  --dk-chip:      #262932;   /* ชิป/avatar/icon bg อ่อนๆ */
  /* text */
  --dk-ink:       #F2F3F5;   /* ข้อความหลัก */
  --dk-ink-2:     #D6D8DD;   /* ข้อความรอง */
  --dk-ink-3:     #AFB2B9;   /* ข้อความ tertiary */
  --dk-muted:     #9296A0;   /* muted */
  --dk-muted-2:   #6C707A;   /* muted จางลง */
  /* lines */
  --dk-hair:      #2E313C;   /* เส้นขอบการ์ด */
  --dk-hair-soft: #24262F;   /* เส้น divider จางลง */
  /* brand/link */
  --dk-brand:     #4D9BFF;   /* link/brand บนพื้นมืด */
  /* semantic tints (พื้นจาง + ตัวอักษรสด สำหรับ chip/badge) */
  --dk-amber-bg:  #2E2410;  --dk-amber-ink:#FBBF24;  --dk-amber-line:#574510;
  --dk-leaf-bg:   #0E2A20;  --dk-leaf:#34D399;       --dk-leaf-line:#1C5238;
  --dk-rose-bg:   #341417;  --dk-rose:#F87171;       --dk-rose-line:#5A2327;
  --dk-sky-bg:    #122036;  --dk-sky:#6AA8FF;        --dk-sky-line:#1E3A5F;
  --dk-ember-bg:  #3A2410;  --dk-ember-ink:#F9A86A;
  --dk-violet-bg: #241338;  --dk-violet:#B794F6;
}

/* ============================================
   Base Reset & Defaults
   ============================================ */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  margin: 0;
  padding: 0;
  font-family: var(--font-body);
  font-size: var(--fs-base);
  font-weight: var(--fw-regular);
  line-height: var(--lh-normal);
  color: var(--clr-text);
  background-color: var(--clr-bg);
  transition: background-color var(--transition-base), color var(--transition-base);
}

/* Theme transition for smooth dark mode switch */
body.theme-transitioning,
body.theme-transitioning *,
body.theme-transitioning *::before,
body.theme-transitioning *::after {
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease !important;
}

/* ============================================
   Typography
   ============================================ */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  color: var(--clr-text);
  margin-top: 0;
  margin-bottom: var(--space-3);
}

h1 { font-size: var(--fs-3xl); }
h2 { font-size: var(--fs-2xl); }
h3 { font-size: var(--fs-xl); }
h4 { font-size: var(--fs-lg); }
h5 { font-size: var(--fs-md); }
h6 { font-size: var(--fs-base); }

p {
  margin-top: 0;
  margin-bottom: var(--space-4);
  color: var(--clr-text-secondary);
}

a {
  color: var(--clr-text-link);
  text-decoration: none;
  transition: color var(--transition-fast);
}

a:hover {
  color: var(--clr-primary-dark);
}

small, .text-small {
  font-size: var(--fs-sm);
}

.text-xs { font-size: var(--fs-xs); }
.text-muted { color: var(--clr-text-muted) !important; }
.text-secondary { color: var(--clr-text-secondary) !important; }

/* Thai text utility */
.text-thai {
  font-family: var(--font-thai);
}

.text-en {
  font-family: var(--font-en);
}

/* ============================================
   Utility Classes
   ============================================ */
.font-weight-medium { font-weight: var(--fw-medium); }
.font-weight-semibold { font-weight: var(--fw-semibold); }

.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fade-in {
  animation: fadeIn 0.4s ease-out;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

.stagger-1 { animation-delay: 0.05s; }
.stagger-2 { animation-delay: 0.1s; }
.stagger-3 { animation-delay: 0.15s; }
.stagger-4 { animation-delay: 0.2s; }
.stagger-5 { animation-delay: 0.25s; }

/* Scrollbar styling */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: var(--clr-gray-400);
  border-radius: var(--radius-full);
}

::-webkit-scrollbar-thumb:hover {
  background: var(--clr-gray-500);
}

[data-theme="dark"] ::-webkit-scrollbar-thumb {
  background: var(--clr-gray-700);
}

/* Selection */
::selection {
  background-color: var(--clr-primary);
  color: var(--clr-white);
}

/* ─────────────────────────────────────────────────────────────────
 * Deprecated: page eyebrows / breadcrumbs above H1 (2026-05-26)
 * User feedback: "WORKSPACE · ..." / "RESUME · ..." / Section eyebrows
 * ตา HR ใช้ประโยชน์ไม่ได้ + เกะกะ → hide site-wide
 * Exempt: .dv2-head .crumb (dashboard date — not a breadcrumb)
 *         .header-breadcrumb (top header from partials/header.php)
 * ───────────────────────────────────────────────────────────────── */
.page-hero-eyebrow,
.al-head .crumb,
.ab-head .crumb,
.jp-head .crumb,
.je-head .crumb,
.je-eyebrow,
.bl-head .crumb,
.mp-head .crumb,
.rh-head .crumb,
.ja-eyebrow,
.ja-page-head .ja-eyebrow {
  display: none !important;
}
/* Catch-all สำหรับ crumb อื่นๆ ที่อยู่ใน main content (billing, reports, etc.)
 * — ยกเว้น .dv2-head (dashboard date) + .header-breadcrumb (top nav) */
.app-content .crumb:not(.dv2-head .crumb) {
  display: none !important;
}


/* ████████████████████████████████████████████████████████████
   DARK MODE — Per-page overrides (2026-06-16)
   ████████████████████████████████████████████████████████████
   อยู่ใน theme.css โดยตรง (ไม่แยกไฟล์) → mtime ของ theme.css เปลี่ยนทุกครั้งที่แก้
   = asset_url('css/theme.css')?v=mtime bust cache อัตโนมัติเสมอ
   ค่ามาตรฐาน (--dk-*) นิยามที่ [data-theme="dark"] ด้านบนไฟล์นี้ (tune ที่นั่น)

   วิธีเพิ่มหน้าใหม่:
   1. หา wrapper class ของหน้า (เช่น <body class="bl"> หรือ <div class="dv2-page">)
   2. map "ทุก token ที่หน้านั้นนิยาม" → --dk-* ให้ตรงความหมาย (อ่าน comment ของ token เดิม)
   3. ทับจุดที่ hardcode สีตรงๆ (#fff/#0A0A0B/#F0F0F0...) ด้วย selector scoped ใต้ [data-theme="dark"] .wrapper
   4. อัพเดต docs/DARKMODE.md (ทำแล้ว/ยัง)

   ⚠️ specificity: [data-theme="dark"] .wrapper (0,2,0) > .wrapper ที่ page ตั้ง (0,1,0) → ทับได้เสมอ
   ============================================================ */


/* ============================================================
   GLOBAL BASE — body หลายหน้า hardcode background:#fff → ทับเป็นพื้นมืด
   (scope @media screen เพื่อไม่ให้ติดตอนพิมพ์ — หน้าเอกสาร เช่น resume-preview)
   ============================================================ */
@media screen {
  [data-theme="dark"] html,
  [data-theme="dark"] body { background: var(--clr-bg); }
}
/* default ข้อความใน content ให้สว่าง — ช่วย element ที่ไม่มี wrapper/ token (เช่น <h2> ในหน้า resume-not-available); wrapper ที่ตั้งสีเองจะ override */
[data-theme="dark"] .app-content { color: var(--clr-text); }
/* heading กลาง (partial page-hero / page-hero.css) — ใช้หลายหน้า · title #0E0E0E, sub #6E6E6E */
[data-theme="dark"] .page-hero-title { color: var(--dk-ink); }
[data-theme="dark"] .page-hero-sub { color: var(--dk-muted); }


/* ============================================================
   SHELL · Sidebar (shared partial .app-sidebar-v2) — ครอบทุกหน้า
   note: component bespoke light · ember accent (ส้ม) คงไว้ดูดีบนพื้นมืด
   ============================================================ */
[data-theme="dark"] .app-sidebar-v2 {
  background: #15171E;
  border-right-color: var(--dk-hair);
  color: var(--dk-ink);
}
[data-theme="dark"] .app-sidebar-v2::-webkit-scrollbar-thumb { background: #3A3D47; }
[data-theme="dark"] .app-sidebar-v2::-webkit-scrollbar-thumb:hover { background: #4A4D57; }
[data-theme="dark"] .app-sidebar-v2 .sb2-brand { border-bottom-color: var(--dk-hair); }
[data-theme="dark"] .app-sidebar-v2 .sb2-brand .name { color: var(--dk-ink); }
[data-theme="dark"] .app-sidebar-v2 .sb2-brand .name small { color: var(--dk-muted); }
/* package usage card */
[data-theme="dark"] .app-sidebar-v2 .sb2-co { background: var(--dk-card); border-color: var(--dk-hair); }
[data-theme="dark"] .app-sidebar-v2 .sb2-co.is-warning  { background: var(--dk-amber-bg); border-color: var(--dk-amber-line); }
[data-theme="dark"] .app-sidebar-v2 .sb2-co.is-critical,
[data-theme="dark"] .app-sidebar-v2 .sb2-co.is-expired  { background: var(--dk-rose-bg); border-color: var(--dk-rose-line); }
[data-theme="dark"] .app-sidebar-v2 .sb2-co .co-lbl,
[data-theme="dark"] .app-sidebar-v2 .sb2-co .co-days .num,
[data-theme="dark"] .app-sidebar-v2 .sb2-co .co-days .unit,
[data-theme="dark"] .app-sidebar-v2 .sb2-co .co-expire { color: var(--dk-ink); }
[data-theme="dark"] .app-sidebar-v2 .sb2-co.is-warning  .co-days .num { color: var(--dk-amber-ink); }
[data-theme="dark"] .app-sidebar-v2 .sb2-co.is-critical .co-days .num { color: var(--dk-rose); }
[data-theme="dark"] .app-sidebar-v2 .sb2-co .co-days-link:hover { background: rgba(255,255,255,.06); }
[data-theme="dark"] .app-sidebar-v2 .sb2-co .co-btn.is-ghost { background: var(--dk-card-2); color: var(--dk-ink-2); border-color: var(--dk-hair); }
/* เพิ่งสมัคร ยังไม่เคยซื้อ — state is-new */
[data-theme="dark"] .app-sidebar-v2 .sb2-co.is-new { background: var(--dk-amber-bg); border-color: var(--dk-amber-line); }
[data-theme="dark"] .app-sidebar-v2 .sb2-co .co-new-title { color: var(--dk-amber-ink); }
[data-theme="dark"] .app-sidebar-v2 .sb2-co .co-new-sub { color: var(--dk-ink-3); }
/* nav */
[data-theme="dark"] .app-sidebar-v2 .sb2-section-label { color: var(--dk-muted); }
[data-theme="dark"] .app-sidebar-v2 .sb2-link { color: var(--dk-ink-2); }
[data-theme="dark"] .app-sidebar-v2 .sb2-link i { color: var(--dk-muted); }
[data-theme="dark"] .app-sidebar-v2 .sb2-link:hover { background: rgba(255,255,255,.06); color: var(--dk-ink); }
[data-theme="dark"] .app-sidebar-v2 .sb2-link:hover i { color: var(--dk-ink); }
[data-theme="dark"] .app-sidebar-v2 .sb2-link.is-active { background: var(--dk-ember-bg); color: var(--dk-ember-ink); }
[data-theme="dark"] .app-sidebar-v2 .sb2-footer { color: var(--dk-muted-2); }


/* ============================================================
   SHARED PARTIAL · post-type-tabs (.ptt-*) — toggle ประกาศข้อความ/พร้อมรูป
   ใช้หลายหน้า (jobs/history, albums, ...) → override แบบ global · is-active เดิม hardcode #FFFFFF
   ============================================================ */
[data-theme="dark"] .ptt-tabs { background: var(--dk-sunken); }
[data-theme="dark"] .ptt-tab { color: var(--dk-muted); }
[data-theme="dark"] .ptt-tab:hover { color: var(--dk-ink); }
[data-theme="dark"] .ptt-tab.is-active { background: var(--dk-card-2); color: var(--dk-ink); }
[data-theme="dark"] .ptt-cnt { background: rgba(255,255,255,.10); color: var(--dk-ink); }
[data-theme="dark"] .ptt-tab:not(.is-active) .ptt-cnt { color: var(--dk-muted); }


/* ============================================================
   SHARED · Bootstrap 5 components in dark (global)
   ครอบทุกหน้าที่ใช้ Bootstrap — modal, form-control, ปุ่ม outline, utilities
   (เช่น modal "เลือกข้อมูลการสมัคร" ใน job-post-manual)
   ============================================================ */
[data-theme="dark"] .modal-content { background: var(--dk-card); color: var(--dk-ink); border-color: var(--dk-hair); }
[data-theme="dark"] .modal-header,
[data-theme="dark"] .modal-footer { border-color: var(--dk-hair); }
/* Bootstrap card — เนื้อหาหลายหน้า (reports ฯลฯ) อยู่ใน .card · ไม่พึ่ง data-bs-theme */
[data-theme="dark"] .card { background-color: var(--dk-card); color: var(--dk-ink); border-color: var(--dk-hair); }
[data-theme="dark"] .card-header,
[data-theme="dark"] .card-footer { background-color: var(--dk-card-2); border-color: var(--dk-hair); }
[data-theme="dark"] .btn-close:not(.btn-close-white) { filter: invert(1) grayscale(1) brightness(1.8); }
[data-theme="dark"] .form-control,
[data-theme="dark"] .form-select {
  background-color: var(--dk-card-2); color: var(--dk-ink); border-color: var(--dk-hair);
}
[data-theme="dark"] .form-control::placeholder { color: var(--dk-muted-2); }
[data-theme="dark"] .form-control:focus,
[data-theme="dark"] .form-select:focus {
  background-color: var(--dk-card-2); color: var(--dk-ink);
  border-color: var(--dk-brand); box-shadow: 0 0 0 .2rem rgba(77,155,255,.25);
}
[data-theme="dark"] .form-label { color: var(--dk-ink-2); }
[data-theme="dark"] .text-muted { color: var(--dk-muted) !important; }
[data-theme="dark"] .btn-outline-secondary { color: var(--dk-ink-2); border-color: var(--dk-hair); }
[data-theme="dark"] .btn-outline-secondary:hover { background: var(--dk-card-2); color: var(--dk-ink); border-color: var(--dk-muted-2); }
[data-theme="dark"] .border { border-color: var(--dk-hair) !important; }
/* utility พื้นอ่อน (เช่น contact card ที่ถูกเลือก ใช้ .bg-light) */
[data-theme="dark"] .bg-light { background-color: var(--dk-card-2) !important; }
[data-theme="dark"] .bg-white { background-color: var(--dk-card) !important; }
/* inner panel "เพิ่มข้อมูลติดต่อ" มี inline background:#f9fafb (job-post-manual) */
[data-theme="dark"] #hrcForm { background: var(--dk-sunken) !important; }


/* ============================================================
   Dashboard — wrapper .dv2-page
   note: --canvas = ชิป/avatar (ไม่ใช่พื้นหลังหน้า) · --page-bg = พื้นหลังหน้า · --surface = การ์ด
   ============================================================ */
[data-theme="dark"] .dv2-page {
  --ink:        var(--dk-ink);
  --ink-2:      var(--dk-ink-2);
  --ink-3:      var(--dk-ink-3);
  --muted:      var(--dk-muted);
  --muted-2:    var(--dk-muted-2);
  --hair:       var(--dk-hair);
  --hair-soft:  var(--dk-hair-soft);
  --canvas:     var(--dk-chip);     /* chip/avatar/icon bg */
  --page-bg:    var(--dk-bg);
  --surface:    var(--dk-card);
  --wash:       #1F2230;            /* row hover */
  --ember-bg:   var(--dk-ember-bg);  --ember-ink: var(--dk-ember-ink);
  --leaf-bg:    var(--dk-leaf-bg);   --leaf:      var(--dk-leaf);
  --rose-bg:    var(--dk-rose-bg);   --rose:      var(--dk-rose);
  --sky-bg:     var(--dk-sky-bg);    --sky:       var(--dk-sky);
  --violet-bg:  var(--dk-violet-bg); --violet:    var(--dk-violet);
}
/* hardcoded #fff → surfaces */
[data-theme="dark"] .dv2-page .dv2-list li > .av,        /* avatar circle */
[data-theme="dark"] .dv2-page .dv2-minical .mc-open,     /* open-month button */
[data-theme="dark"] .dv2-page .dv2-loadmore-btn {        /* load-more button */
  background: var(--dk-card-2);
}
[data-theme="dark"] .dv2-page .dv2-minical .mc-cell.is-today .dot { background: var(--dk-ink); }
/* ink button: dark mode → --ink remap เป็นสีอ่อน → ต้อง flip ตัวอักษร/ไอคอนเป็นสีเข้ม (ไม่งั้นขาวบนขาว) */
[data-theme="dark"] .dv2-page .dv2-pill.is-ink { color: #15171E; }
[data-theme="dark"] .dv2-page .dv2-pill.is-ink:hover { background: #fff; color: #15171E; box-shadow: none; }
/* มินิปฏิทิน: cell วันนี้ bg=--ink (สีอ่อนใน dark) → ตัวเลขต้องเป็นสีเข้ม (holiday/hover พื้นสี คงขาว) */
[data-theme="dark"] .dv2-page .dv2-minical .mc-cell.is-today { color: #15171E; }
[data-theme="dark"] .dv2-page .dv2-minical .mc-cell.is-today.is-holiday,
[data-theme="dark"] .dv2-page .dv2-minical .mc-cell.is-today:hover { color: #fff; }


/* ============================================================
   Billing (billing-bills / และไฟล์ billing-* ที่ใช้ wrapper .bl) — wrapper .bl
   note: --canvas = พื้นหลังหน้า · --surface = การ์ด · ไม่มี --ink-2 (ใช้ --ink, --ink-3)
   ============================================================ */
[data-theme="dark"] .bl {
  --ink:        var(--dk-ink);
  --ink-3:      var(--dk-ink-3);
  --muted:      var(--dk-muted);
  --muted-2:    var(--dk-muted-2);
  --hair:       var(--dk-hair);
  --hair-soft:  var(--dk-hair-soft);
  --canvas:     var(--dk-bg);       /* พื้นหลังหน้า */
  --surface:    var(--dk-card);     /* การ์ด */
  --wash:       var(--dk-sunken);   /* row hover */
  --brand:      var(--dk-brand);
  --amber-bg:   var(--dk-amber-bg);  --amber-ink: var(--dk-amber-ink);  --amber-line: var(--dk-amber-line);
  --ok-bg:      var(--dk-leaf-bg);   --ok-ink:    var(--dk-leaf);       --ok-line:    var(--dk-leaf-line);
  --bad-bg:     var(--dk-rose-bg);   --bad-ink:   var(--dk-rose);       --bad-line:   var(--dk-rose-line);
}
/* hardcoded → surfaces/text */
[data-theme="dark"] .bl .bl-table thead th { background: var(--dk-sunken); color: var(--dk-ink-3); }
[data-theme="dark"] .bl .bm { background: var(--dk-card); }   /* modal */
/* filter tab active + ปุ่ม ink (bg=var(--ink)→สว่าง) → พลิกตัวอักษร/badge เข้ม + hover #000→โทนสว่าง */
[data-theme="dark"] .bl .bl-tab.is-active,
[data-theme="dark"] .bl .btn-pill.is-ink { color: #15171E; }
[data-theme="dark"] .bl .bl-tab.is-active .bl-tab-count { background: rgba(0,0,0,.16); color: #15171E; }
[data-theme="dark"] .bl .btn-pill.is-ink:hover { background: #D6D8DD; }

/* ===== SHARED PARTIAL · billing-subnav (.bsub) — การ์ดเมนู billing บนสุด (ทุกหน้า billing) ===== */
[data-theme="dark"] .bsub {
  --bsub-ink: var(--dk-ink);       --bsub-muted: var(--dk-muted); --bsub-muted-2: var(--dk-muted-2);
  --bsub-hair: var(--dk-hair);     --bsub-hair-soft: var(--dk-hair-soft);
  --bsub-surface: var(--dk-card);  --bsub-wash: var(--dk-sunken);
}
[data-theme="dark"] .bsub-tab .ic { background: var(--dk-card-2); }   /* icon bg เดิม #F2F2F2 */
/* การ์ด active: bg=var(--bsub-ink)→สว่าง → พลิกตัวอักษร/ไอคอนเป็นเข้ม */
[data-theme="dark"] .bsub-tab.is-on .label,
[data-theme="dark"] .bsub-tab.is-on .desc { color: #15171E; }
[data-theme="dark"] .bsub-tab.is-on .ic { background: rgba(0,0,0,.10); color: #15171E; border-color: rgba(0,0,0,.18); }


/* ============================================================
   สร้างประกาศ (job-posts-entry) — wrapper .je
   note: canvas=พื้นหลังหน้า · surface=การ์ด · ink ใช้เป็นพื้นปุ่ม/แบดจ์ดำ → dark ต้องพลิกตัวอักษร
   ============================================================ */
[data-theme="dark"] .je {
  --ink: var(--dk-ink);       --ink-2: var(--dk-ink-2);   --ink-3: var(--dk-ink-3);
  --muted: var(--dk-muted);   --muted-2: var(--dk-muted-2); --muted-3: var(--dk-muted-2);
  --hair: var(--dk-hair);     --hair-soft: var(--dk-hair-soft);
  --canvas: var(--dk-bg);     --surface: var(--dk-card);   --wash: var(--dk-sunken);
}
/* แบดจ์/ปุ่ม ink: bg เป็น var(--ink) → กลายเป็นสว่างแล้ว ต้องพลิกตัวอักษรเป็นเข้ม */
[data-theme="dark"] .je .je-head h1 .ico,
[data-theme="dark"] .je .btn-pill.is-ink,
[data-theme="dark"] .je .je-plan .plan-tag.is-best,
[data-theme="dark"] .je .je-tip .new-tag { color: #15171E; }


/* ============================================================
   ประวัติการประกาศ (job-posts) — wrapper .jp  (+ partial job-post-rows ใช้ token เดียวกัน)
   ============================================================ */
[data-theme="dark"] .jp {
  --ink: var(--dk-ink);       --ink-2: var(--dk-ink-2);   --ink-3: var(--dk-ink-3);
  --muted: var(--dk-muted);   --muted-2: var(--dk-muted-2); --muted-3: var(--dk-muted-2);
  --hair: var(--dk-hair);     --hair-soft: var(--dk-hair-soft);
  --canvas: var(--dk-bg);     --surface: var(--dk-card);   --wash: var(--dk-sunken);
  /* semantic ink → สว่าง (ใช้เป็นตัวอักษรบน chip tint เป็นหลัก) */
  --amber: var(--dk-amber-ink); --amber-bg: var(--dk-amber-bg); --amber-ink: var(--dk-amber-ink);
  --leaf: var(--dk-leaf);     --leaf-bg: var(--dk-leaf-bg);
  --rose: var(--dk-rose);     --rose-bg: var(--dk-rose-bg);
}
/* ปุ่ม primary ink → ปุ่มสว่าง + ตัวอักษรเข้ม */
[data-theme="dark"] .jp .btn-pill.is-ink,
[data-theme="dark"] .jp .jp-modal-btn.is-primary,
[data-theme="dark"] .jp .jp-pin-preset.is-active,
[data-theme="dark"] .jp .jp-tab.is-active { color: #15171E; }
/* hover: bg เดิม #000 ทำให้ตัวอักษรเข้มหาย → คงพื้นสว่าง */
[data-theme="dark"] .jp .btn-pill.is-ink:hover,
[data-theme="dark"] .jp .jp-modal-btn.is-primary:hover { background: #fff; color: #15171E; }
/* filter tab ที่ active: bg=var(--ink)→สว่าง · badge เดิมขาว → พลิกเป็นเข้ม */
[data-theme="dark"] .jp .jp-tab.is-active .jp-tab-count { background: rgba(0,0,0,.16); color: #15171E; }
[data-theme="dark"] .jp .jp-table thead th { color: var(--dk-ink-3); }
/* แถบ bulk action: คงเป็นแถบมืด (อย่าตาม --ink ที่กลายเป็นสว่าง) */
[data-theme="dark"] .jp .jp-bulk-bar { background: var(--dk-card-2); color: var(--dk-ink); }
/* ปุ่ม/ไอคอน accent แบบ solid (พื้นสี + ตัวอักษรขาว) — คงสีเข้มไว้ให้ตัวอักษรขาวอ่านออก */
[data-theme="dark"] .jp .jp-modal-btn.is-danger { background: #B42318; border-color: #B42318; }
[data-theme="dark"] .jp .jp-pkg-banner.is-empty .jp-pkg-icon { background: #B45309; }


/* ============================================================
   Banner โฆษณา (HR) — wrapper .bn  (pages/banners.php)
   note: --canvas=พื้นหลังหน้า · --surface=การ์ด · --field=พื้น input · ปุ่ม .bn-submit ใช้ --ink เป็นพื้น → dark พลิกตัวอักษร
   ============================================================ */
[data-theme="dark"] .bn {
  --ink: var(--dk-ink);       --ink-2: var(--dk-ink-2);   --ink-3: var(--dk-ink-3);
  --muted: var(--dk-muted);   --muted-2: var(--dk-muted-2);
  --hair: var(--dk-hair);     --hair-soft: var(--dk-hair-soft);
  --canvas: var(--dk-bg);     --surface: var(--dk-card);   --wash: var(--dk-sunken);   --field: var(--dk-card-2);
  --ok-bg: var(--dk-leaf-bg);   --ok-ink: var(--dk-leaf);   --ok-line: var(--dk-leaf-line);
  --info-bg: var(--dk-sky-bg);  --info-ink: var(--dk-sky);  --info-line: var(--dk-sky-line);
  --bad-bg: var(--dk-rose-bg);  --bad-ink: var(--dk-rose);  --bad-line: var(--dk-rose-line);
  --none-bg: var(--dk-card-2);  --none-ink: var(--dk-muted);--none-line: var(--dk-hair);
  --ember: var(--dk-ember-ink); --ember-ink: var(--dk-ember-ink);
}
/* การ์ด online: เส้นเขียวอ่อน (#86EFAC สว่างไป) → ใช้เส้นเขียว dark */
[data-theme="dark"] .bn .bn-card.is-live { border-color: var(--dk-leaf-line); }
/* slot icon bg เดิม #FFF → ใช้ surface ยกระดับ */
[data-theme="dark"] .bn .bn-slot-ic { background: var(--dk-card-2); }
/* ปุ่มบันทึก: bg=var(--ink) กลายเป็นสว่าง → พลิกตัวอักษรเป็นเข้ม + hover คงพื้นสว่าง */
[data-theme="dark"] .bn .bn-submit { color:#15171E; }
[data-theme="dark"] .bn .bn-submit:hover { background:#fff; color:#15171E; }

/* ============================================================
   ผู้สมัครทั้งหมด (applicants-all) — wrapper .al-page  (+ partial applicants-all-rows)
   ============================================================ */
[data-theme="dark"] .al-page {
  --ink: var(--dk-ink);       --ink-2: var(--dk-ink-2);   --ink-3: var(--dk-ink-3);
  --muted: var(--dk-muted);   --muted-2: var(--dk-muted-2);
  --hair: var(--dk-hair);     --hair-soft: var(--dk-hair-soft);
  --canvas: var(--dk-bg);     --surface: var(--dk-card);   --wash: var(--dk-sunken);
  --ember: var(--dk-ember-ink); --ember-bg: var(--dk-ember-bg); --ember-ink: var(--dk-ember-ink);
  --leaf: var(--dk-leaf);     --leaf-bg: var(--dk-leaf-bg);
  --rose: var(--dk-rose);     --rose-bg: var(--dk-rose-bg);
  --sky: var(--dk-sky);       --sky-bg: var(--dk-sky-bg);
  --violet: var(--dk-violet); --violet-bg: var(--dk-violet-bg);
}
[data-theme="dark"] .al-page .al-pill.is-on { color: #15171E; }
/* ปุ่ม inline-style 2 ตัวบนหัวหน้า (override inline ด้วย !important) */
[data-theme="dark"] .al-page a.dv2-pill.is-ghost {
  background: var(--dk-card-2) !important; color: var(--dk-ink-2) !important; border-color: var(--dk-hair) !important;
}
[data-theme="dark"] .al-page a.al-newbtn { color: #15171E !important; }   /* bg=var(--ink) inline → สว่างแล้ว */


/* ============================================================
   สร้างประกาศ — ฟอร์ม manual/quick (job-post-manual) — wrapper body.jpm
   note: หน้านี้ใช้ theme token (--clr-*) เยอะ → dark auto แล้ว · ที่นี่ override เฉพาะจุด hardcode
   (controller manual() และ quick() render view เดียวกัน → ครอบทั้ง 2 route)
   ============================================================ */
/* control ที่ hardcode พื้น #fff → การ์ดมืด */
[data-theme="dark"] .jpm .edu3-opt,
[data-theme="dark"] .jpm .sal3-mini,
[data-theme="dark"] .jpm .sal3-opt,
[data-theme="dark"] .jpm .sal3-input,
[data-theme="dark"] .jpm .age2-opt,
[data-theme="dark"] .jpm .age2-input,
[data-theme="dark"] .jpm .vac3-opt,
[data-theme="dark"] .jpm .vac3-input,
[data-theme="dark"] .jpm .ben2-group,
[data-theme="dark"] .jpm .ben2-chip,
[data-theme="dark"] .jpm .ben-check .check-icon,
[data-theme="dark"] .jpm .vac-seg,
[data-theme="dark"] .jpm .vac-step-btn,
[data-theme="dark"] .jpm .salary-input:focus { background: var(--dk-card); }
/* disabled / hover ที่ hardcode */
[data-theme="dark"] .jpm .sal3-input:disabled,
[data-theme="dark"] .jpm .age2-input:disabled,
[data-theme="dark"] .jpm .vac3-input:disabled { background: var(--dk-sunken); }
[data-theme="dark"] .jpm .ben2-head:hover { background: var(--dk-card-2); }
/* active state ฟ้าอ่อน (#EFF6FF/#0071E3) → sky tint มืด + ตัวอักษร/เส้นฟ้าสว่าง */
[data-theme="dark"] .jpm .edu3-opt.is-on,
[data-theme="dark"] .jpm .sal3-opt.is-on,
[data-theme="dark"] .jpm .sal3-mini.is-on,
[data-theme="dark"] .jpm .age2-opt.is-on,
[data-theme="dark"] .jpm .vac3-opt.is-on,
[data-theme="dark"] .jpm .ben2-chip.is-on,
[data-theme="dark"] .jpm .choice-chip.active {
  background: var(--dk-sky-bg); border-color: var(--dk-sky); color: var(--dk-sky);
}
/* status tag เล็ก (สถานที่ = เขียว, AI = อำพัน) */
[data-theme="dark"] .jpm .loc-tag { background: var(--dk-leaf-bg); color: var(--dk-leaf); border-color: var(--dk-leaf-line); }
[data-theme="dark"] .jpm .ai-write-flag { background: var(--dk-amber-bg); color: var(--dk-amber-ink); border-color: var(--dk-amber-line); }
/* AI hero card (เฉพาะ /jobs/quick) — flip จุด hardcode สีอ่อน → dark */
[data-theme="dark"] .jpm .ai-hero { background: var(--dk-card); box-shadow: none; }
[data-theme="dark"] .jpm .ai-mode-pill-icon,
[data-theme="dark"] .jpm .ai-paste-shortcut kbd { background: var(--dk-chip); }
[data-theme="dark"] .jpm .ai-mode-pill:hover,
[data-theme="dark"] .jpm .ai-mode-pill.active,
[data-theme="dark"] .jpm .ai-paste-wrap:focus-within { background: var(--dk-card-2); }
[data-theme="dark"] .jpm .ai-upload-wrap { border-color: var(--dk-hair); }
[data-theme="dark"] .jpm .ai-hero-error { background: var(--dk-rose-bg); border-color: var(--dk-rose-line); color: var(--dk-rose); }
[data-theme="dark"] .jpm .fs-card-incomplete-msg { background: var(--dk-amber-bg); color: var(--dk-amber-ink); border-bottom-color: var(--dk-amber-line); }

/* ============================================================
   Billing Checkout — wrapper body.bk (HR) — token remap + flip
   ============================================================ */
[data-theme="dark"] .bk {
  --ink:       var(--dk-ink);
  --ink-2:     var(--dk-ink-2);
  --ink-3:     var(--dk-ink-3);
  --muted:     var(--dk-muted);
  --muted-2:   var(--dk-muted-2);
  --muted-3:   var(--dk-chip);      /* disabled bg */
  --hair:      var(--dk-hair);
  --hair-soft: var(--dk-hair-soft);
  --canvas:    var(--dk-bg);
  --surface:   var(--dk-card);
  --wash:      #1F2230;
  --amber-bg:  var(--dk-amber-bg);
  --amber-ink: var(--dk-amber-ink);
}
/* ink buttons/chips: bg=--ink (อ่อนใน dark) → flip ตัวอักษร/ไอคอนเป็นสีเข้ม */
[data-theme="dark"] .bk .bk-step.is-done .num,
[data-theme="dark"] .bk .bk-step.is-active,
[data-theme="dark"] .bk .bk-step.is-active .num,
[data-theme="dark"] .bk .bk-submit,
[data-theme="dark"] .bk .bk-branch-opt.is-on,
[data-theme="dark"] .bk .bk-branch-opt.is-on i,
[data-theme="dark"] .bk .bk-addr-def { color: #15171E; }
/* num bullet ของ step active: พื้นโปร่งขาวมองไม่เห็นบนพิลล์สีอ่อน → ใช้เงาดำจาง */
[data-theme="dark"] .bk .bk-step.is-active .num { background: rgba(0,0,0,.16); }
[data-theme="dark"] .bk .bk-submit:hover:not(:disabled) { background: #fff; color: #15171E; }
/* hardcoded สีอ่อน → dark */
[data-theme="dark"] .bk .bk-email-tag { background: var(--dk-chip); }
[data-theme="dark"] .bk .bk-quota-chip.unlimited { border-color: var(--dk-amber-line); }

/* ============================================================
   Billing Order Detail — wrapper body.bo (HR) — token remap + flip
   ============================================================ */
[data-theme="dark"] .bo {
  --ink:       var(--dk-ink);
  --ink-2:     var(--dk-ink-2);
  --ink-3:     var(--dk-ink-3);
  --muted:     var(--dk-muted);
  --muted-2:   var(--dk-muted-2);
  --muted-3:   var(--dk-chip);
  --hair:      var(--dk-hair);
  --hair-soft: var(--dk-hair-soft);
  --canvas:    var(--dk-bg);
  --surface:   var(--dk-card);
  --wash:      #1F2230;
  --amber-bg:  var(--dk-amber-bg);  --amber-ink: var(--dk-amber-ink);  --amber-line: var(--dk-amber-line);
  --ok-bg:     var(--dk-leaf-bg);   --ok-ink:    var(--dk-leaf);        --ok-line:    var(--dk-leaf-line);
  --bad-bg:    var(--dk-rose-bg);   --bad-ink:   var(--dk-rose);        --bad-line:   var(--dk-rose-line);
}
/* ink buttons: bg=--ink (อ่อนใน dark) → flip ตัวอักษรเป็นสีเข้ม */
[data-theme="dark"] .bo .bo-step.is-active,
[data-theme="dark"] .bo .bo-step.is-done .num,
[data-theme="dark"] .bo .bo-submit { color: #15171E; }
[data-theme="dark"] .bo .bo-step.is-active .num { background: rgba(0,0,0,.18); color: #15171E; }
[data-theme="dark"] .bo .bo-submit:hover:not(:disabled) { background: #fff; color: #15171E; }
/* state-cta: bg rgba ขาว hardcoded → dark */
[data-theme="dark"] .bo .bo-state-cta { background: var(--dk-card-2); color: var(--dk-ink); border-color: var(--dk-hair); }
[data-theme="dark"] .bo .bo-state-cta:hover { background: var(--dk-card); }


/* ============================================================
   ดูตัวอย่าง Resume (resume-preview) — wrapper .rd-page
   note: เป็นเอกสาร → wrap ใน @media screen เพื่อไม่ให้ dark ติดตอน "พิมพ์" (resume ต้องพิมพ์บนกระดาษขาว)
   token: paper/rd-bg=พื้น · rd-card=การ์ด · line=เส้น · brand-*=น้ำเงิน · semantic ปรับให้ทั้ง badge+chip อ่านได้
   ============================================================ */
@media screen {
  [data-theme="dark"] .rd-page {
    --ink:#F2F3F5;        --ink-2:#D6D8DD;
    --muted:#9296A0;      --muted-2:#6C707A;
    --line:#2E313C;       --line-2:#24262F;
    --paper:#15171E;      --rd-bg:#0F1117;     --rd-card:#1A1D26;
    --brand-50:#15233A;   --brand-100:#1E3A5F;
    --brand-500:#3B8EF0;  --brand-600:#5AA0F5;   /* น้ำเงิน: ใช้เป็นทั้งพื้นปุ่ม(ตัวขาว)+ลิงก์ */
    --green:#3DD68C;      --green-soft:#0E2A20;
    --red:#EF5350;        --red-soft:#3A1518;    /* แดงสมดุล: badge พื้นแดงตัวขาว + chip ตัวแดงบน tint ได้ทั้งคู่ */
    --amber:#FBBF24;      --amber-soft:#2E2410;
  }
}


/* ████████████████████████████████████████████████████████████
   หมวด "สรรหาบุคลากร" (6 หน้า)  — 2026-06-16
   ████████████████████████████████████████████████████████████ */

/* ===== กลุ่ม A: palette ร่วม (.iv นัดสัมภาษณ์ · .tp Talent Pool · .mg Favorite/management · .ch ประวัติติดต่อ)
   token เหมือนกัน: canvas=พื้นหน้า · surface=การ์ด · wash=จม/hover · ink-tiers · muted-tiers · hair · semantic ===== */
[data-theme="dark"] .iv,
[data-theme="dark"] .tp,
[data-theme="dark"] .mg,
[data-theme="dark"] .ch {
  --ink: var(--dk-ink);       --ink-2: var(--dk-ink-2);   --ink-3: var(--dk-ink-3);
  --muted: var(--dk-muted);   --muted-2: var(--dk-muted-2); --muted-3: var(--dk-muted-2);
  --hair: var(--dk-hair);     --hair-soft: var(--dk-hair-soft);
  --canvas: var(--dk-bg);     --surface: var(--dk-card);   --wash: var(--dk-sunken);
  --amber: var(--dk-amber-ink); --amber-bg: var(--dk-amber-bg); --amber-ink: var(--dk-amber-ink);
  --leaf: var(--dk-leaf);     --leaf-bg: var(--dk-leaf-bg);
  --rose: var(--dk-rose);     --rose-bg: var(--dk-rose-bg);
  --brand: var(--dk-brand);
}
/* today-row hover ที่ hardcode #fff (db-interview) */
[data-theme="dark"] .iv .iv-day.is-today .iv-row:hover { background: var(--dk-card-2); }
/* .mg-search: ช่องค้นหา + ปุ่ม clear ให้มืดชัด + ซ่อนปุ่ม cancel native (สี่เหลี่ยมขาว) — มี custom .clear แล้ว */
[data-theme="dark"] .mg .mg-search input { background: var(--dk-card-2); color: var(--dk-ink); border-color: var(--dk-hair); }
[data-theme="dark"] .mg .mg-search .clear { background: var(--dk-card); color: var(--dk-muted); }
/* count badge บน item ที่ active: top = pill สว่าง → badge เข้มโปร่ง+ตัวอักษรเข้ม (เดิมขาวโปร่ง+ตัวขาว = สี่เหลี่ยมขาว) */
[data-theme="dark"] .mg .mg-nav-item.is-on .count { background: rgba(0,0,0,.18); color: #15171E; }
/* sub = แถวพื้นเข้ม (--wash) → badge สว่าง + ตัวอักษรเข้ม */
[data-theme="dark"] .mg .mg-nav-sub .mg-nav-item.is-on .count { background: var(--dk-ink); color: #15171E; }
/* sub active: label ต้องสว่าง (แถวพื้นเข้ม) — กัน flip top-level (.mg .mg-nav-item.is-on) มาทำให้ label เข้มจนหาย */
[data-theme="dark"] .mg .mg-nav-sub .mg-nav-item.is-on { color: var(--dk-ink); }
.mg-search input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }

/* ===== กลุ่ม B: ค้นหา Resume (.rs-page) · ประวัติเปิด Resume (.rh-page) — ใช้ --paper/--line/--brand, การ์ดเป็น #fff hardcode ===== */
[data-theme="dark"] .rs-page,
[data-theme="dark"] .rh-page {
  background: var(--dk-bg);   /* .rs-page/.rh-page hardcode background:#fff → ต้องทับ ไม่งั้นพื้นขาวค้าง */
  --ink: var(--dk-ink);       --ink-2: var(--dk-ink-2);
  --muted: var(--dk-muted);   --muted-2: var(--dk-muted-2);
  --line: var(--dk-hair);     --line-2: var(--dk-hair-soft);
  --paper: var(--dk-bg);
  --brand: var(--dk-brand);   --brand-deep: #5AA0F5;  --brand-soft: #15233A;
  --amber: var(--dk-amber-ink); --amber-soft: var(--dk-amber-bg);
}
/* การ์ด/แผง/แถว ที่ hardcode #fff → การ์ดมืด */
[data-theme="dark"] .rs-page .rs-ac-panel,
[data-theme="dark"] .rs-page .rs-fbar-search,
[data-theme="dark"] .rs-page .rs-pill-loc,
[data-theme="dark"] .rs-page .rs-pro-card,
[data-theme="dark"] .rh-page .rh-channel-opt,
[data-theme="dark"] .rh-page .rh-chip,
[data-theme="dark"] .rh-page .rh-fbar-search,
[data-theme="dark"] .rh-page .rh-filterbar,
[data-theme="dark"] .rh-page .rh-list-wrap,
[data-theme="dark"] .rh-page .rh-row { background: var(--dk-card); }
[data-theme="dark"] .rh-page .rh-chip { background: var(--dk-card) !important; }  /* .rh-chip ต้นทางใช้ #fff !important */
[data-theme="dark"] .rs-page .rs-finline input[type=number],
[data-theme="dark"] .rs-page .rs-finline select optgroup,
[data-theme="dark"] .rh-page .rh-act:hover,
[data-theme="dark"] .rh-page .rh-chip .count { background: var(--dk-card-2); }
[data-theme="dark"] .app-content.rh-page { background: var(--dk-bg); }
/* filter dropdown/input ใน .rs-finline (select เพศ/จังหวัด/การศึกษา ยังขาว) */
[data-theme="dark"] .rs-page .rs-finline select,
[data-theme="dark"] .rs-page .rs-finline input { background: var(--dk-card-2); color: var(--dk-ink); border-color: var(--dk-hair); }
[data-theme="dark"] .rs-page .rs-finline select option,
[data-theme="dark"] .rs-page .rs-finline select optgroup { background: var(--dk-card); color: var(--dk-ink); }

/* ===== ปุ่ม/ชิป primary ink (bg=var(--ink)→สว่าง) → พลิกตัวอักษรเป็นเข้ม (ปุ่มสว่าง-ตัวเข้ม) ===== */
[data-theme="dark"] .iv .btn-pill.is-ink,
[data-theme="dark"] .iv .iv-act.is-primary,
[data-theme="dark"] .iv .iv-chip.is-active,
[data-theme="dark"] .iv .iv-day-head .today-tag,
[data-theme="dark"] .tp .btn-pill.is-ink,
[data-theme="dark"] .tp .status-pill,
[data-theme="dark"] .tp .tp-decide-btn.is-send,
[data-theme="dark"] .tp .tp-decide.is-on,
[data-theme="dark"] .tp .tp-modal-save,
[data-theme="dark"] .tp .tp-rng a.is-on,
[data-theme="dark"] .tp .tp-status-opt .opt-current-badge,
[data-theme="dark"] .mg .btn-pill.is-ink,
[data-theme="dark"] .mg .mg-chip.is-bl,
[data-theme="dark"] .mg .mg-modal-btn.is-primary,
[data-theme="dark"] .mg .mg-nav-item.is-on,
[data-theme="dark"] .mg .mg-pager-num.is-on,
[data-theme="dark"] .ch .btn-pill.is-ink,
[data-theme="dark"] .ch .ch-d-btn.is-ink,
[data-theme="dark"] .ch .ch-d-channel.is-phone,
[data-theme="dark"] .ch .ch-detail-modal .modal-title .ico,
[data-theme="dark"] .ch .ch-rng a.is-on,
[data-theme="dark"] .ch .ch-rc a.is-on,
[data-theme="dark"] .ch .ch-row[data-channel="phone"] .c-channel .ico,
[data-theme="dark"] .rs-page .rs-fbar-search button.submit,
[data-theme="dark"] .rs-page .rs-head .cta,
[data-theme="dark"] .rs-page .rs-unlock,
[data-theme="dark"] .rh-page .rh-head .cta { color: #15171E; }

/* ===== toast (แจ้งเตือนลอย) — คงเป็นแถบมืด (อย่าตาม --ink ที่กลายเป็นสว่าง) ===== */
[data-theme="dark"] .iv .iv-toast,
[data-theme="dark"] .tp .tp-toast,
[data-theme="dark"] .mg .mg-toast,
[data-theme="dark"] .rs-page .rs-toast,
[data-theme="dark"] .rh-page .rh-toast { background: var(--dk-card-2); color: var(--dk-ink); }


/* ============================================================
   เสริมภาพลักษณ์ — Service Charge (.sc) · อัลบั้มกิจกรรม (.ab list / .af form / .ad detail)
   palette คล้ายกันทั้ง 4 → remap ร่วม + flip ink buttons + toast คงมืด
   ============================================================ */
[data-theme="dark"] .sc,
[data-theme="dark"] .ab,
[data-theme="dark"] .af,
[data-theme="dark"] .ad {
  --ink: var(--dk-ink);       --ink-2: var(--dk-ink-2);   --ink-3: var(--dk-ink-3);
  --muted: var(--dk-muted);   --muted-2: var(--dk-muted-2); --muted-3: var(--dk-muted-2);
  --hair: var(--dk-hair);     --hair-soft: var(--dk-hair-soft);
  --canvas: var(--dk-bg);     --surface: var(--dk-card);   --wash: var(--dk-sunken);
  /* semantic: *-ink = ตัวอักษรบน tint (สว่าง) · solid button คงสีเข้มแยกข้างล่าง */
  --ok-bg: var(--dk-leaf-bg);  --ok-ink: var(--dk-leaf);
  --bad-bg: var(--dk-rose-bg); --bad-ink: var(--dk-rose);
  --amber-bg: var(--dk-amber-bg);   /* --amber (#B45309 solid) คงเดิม ใช้กับตัวอักษรขาวได้ */
  --info-bg: var(--dk-card-2); --info-ink: #AEB2D4;
  --fav-bg: #2E2710;                /* --fav (#F5C518 ทอง) คงเดิม */
}
/* literal #fff surfaces / tint */
[data-theme="dark"] .sc .sc-ack { background: var(--dk-card); }
[data-theme="dark"] .sc .sc-group-menu a.is-on { background: var(--dk-ember-bg); }
/* ปุ่ม/พิล ink (bg=var(--ink)→สว่าง) → พลิกตัวอักษรเป็นเข้ม */
[data-theme="dark"] .sc .btn-pill.is-ink,
[data-theme="dark"] .sc .sc-year-pill.is-active,
[data-theme="dark"] .sc .sc-toolbar .seg .is-active,
[data-theme="dark"] .sc .sc-q .name .badge,
[data-theme="dark"] .sc .ic-btn.save-btn:hover,
[data-theme="dark"] .ab .btn-pill.is-ink,
[data-theme="dark"] .ab .ab-chip.is-active,
[data-theme="dark"] .af .btn-pill.is-ink,
[data-theme="dark"] .ad .btn-pill.is-ink,
[data-theme="dark"] .ad .ad-photo-btn:hover { color: #15171E; }
/* solid accent buttons — คงสีเข้มให้ตัวอักษรขาวอ่านออก */
[data-theme="dark"] .ad .btn-pill.is-publish { background: #15803D; border-color: #15803D; }
[data-theme="dark"] .ad .ad-photo-btn.is-danger:hover { background: #B42318; }
/* toast คงเป็นแถบมืด */
[data-theme="dark"] .sc .sc-toast,
[data-theme="dark"] .ad .ad-toast { background: var(--dk-card-2); color: var(--dk-ink); }
/* btn-pill.is-ink hover เดิม hardcode #000 → dark: พื้นจะดำ+ตัวอักษรเข้ม(จาก flip) = หาย → ใช้โทนสว่างเข้มขึ้นแทน */
[data-theme="dark"] .sc .btn-pill.is-ink:hover,
[data-theme="dark"] .ab .btn-pill.is-ink:hover,
[data-theme="dark"] .af .btn-pill.is-ink:hover,
[data-theme="dark"] .ad .btn-pill.is-ink:hover { background: #D6D8DD; }
/* .ad-photo-btn: ปุ่มพื้นขาว(rgba white)บนรูป — icon ใช้ var(--ink) ที่ dark กลายเป็นสว่าง → icon หาย · บังคับ icon เข้ม */
[data-theme="dark"] .ad .ad-photo-btn { color: #15171E; }


/* ============================================================
   แผนงาน & บันทึก — ปฏิทินของฉัน (.cal) · สมุดบันทึก (.nb)
   ============================================================ */
[data-theme="dark"] .cal,
[data-theme="dark"] .nb {
  --ink: var(--dk-ink);       --ink-2: var(--dk-ink-2);   --ink-3: var(--dk-ink-3);
  --muted: var(--dk-muted);   --muted-2: var(--dk-muted-2); --muted-3: var(--dk-muted-2);
  --hair: var(--dk-hair);     --hair-soft: var(--dk-hair-soft);
  --canvas: var(--dk-bg);     --surface: var(--dk-card);   --wash: var(--dk-sunken);
  --amber-bg: var(--dk-amber-bg); --amber-ink: var(--dk-amber-ink);   /* --amber (#B45309 solid) คงเดิม */
}
[data-theme="dark"] .nb { --sel: var(--dk-brand); --sel-soft: var(--dk-sky-bg); }
/* ink chips/buttons (bg=var(--ink)→สว่าง) → พลิกตัวอักษรเป็นเข้ม */
[data-theme="dark"] .cal .btn-pill.is-ink,
[data-theme="dark"] .cal .cal-day.is-today .cal-day-num,
[data-theme="dark"] .cal .cal-evt.is-mine,
[data-theme="dark"] .nb .btn-pill.is-ink,
[data-theme="dark"] .nb .nb-chip.is-active,
[data-theme="dark"] .nb .nb-save-btn,
[data-theme="dark"] .nb .nb-search .clear:hover { color: #15171E; }
/* search cancel native (สี่เหลี่ยมขาว) — สมุดบันทึกมีปุ่ม clear เอง */
.nb-search input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
/* ปุ่ม is-ink/save hover เดิม #000 → ดำ+ตัวอักษรเข้ม(หลัง flip)=เพี้ยน → โทนสว่างเข้มแทน */
[data-theme="dark"] .cal .btn-pill.is-ink:hover,
[data-theme="dark"] .nb .btn-pill.is-ink:hover,
[data-theme="dark"] .nb .nb-save-btn:hover { background: #D6D8DD; }


/* ============================================================
   ตั้งค่า (settings-profile / password / notifications) — wrapper .st
   + shared partial settings-tabs (.st-tab*) — override global
   ============================================================ */
[data-theme="dark"] .st {
  --ink: var(--dk-ink);       --ink-2: var(--dk-ink-2);   --ink-3: var(--dk-ink-3);
  --muted: var(--dk-muted);   --muted-2: var(--dk-muted-2); --muted-3: var(--dk-muted-2);
  --hair: var(--dk-hair);     --hair-soft: var(--dk-hair-soft);
  --canvas: var(--dk-bg);     --surface: var(--dk-card);   --wash: var(--dk-sunken);
  --ok-bg: var(--dk-leaf-bg);  --ok-ink: var(--dk-leaf);
  --bad-bg: var(--dk-rose-bg); --bad-ink: var(--dk-rose);
  --amber-bg: var(--dk-amber-bg);   /* --amber (#B45309 solid) คงเดิม */
}
/* settings-tabs partial — active/hover เดิม #0A0A0B (เข้ม) → ต้องสว่าง */
[data-theme="dark"] .st-tabs { border-bottom-color: var(--dk-hair); }
[data-theme="dark"] .st-tab { color: var(--dk-muted); }
[data-theme="dark"] .st-tab:hover,
[data-theme="dark"] .st-tab.is-active { color: var(--dk-ink); }
[data-theme="dark"] .st-tab.is-active { border-bottom-color: var(--dk-ink); }
/* ปุ่ม ink → พลิกตัวอักษรเข้ม + hover เดิม #000 → โทนสว่าง */
[data-theme="dark"] .st .btn-pill.is-ink { color: #15171E; }
[data-theme="dark"] .st .btn-pill.is-ink:hover { background: #D6D8DD; }
/* toggle switch: checked track เดิม var(--ink)→สว่าง + knob ขาว = ON จาง → ใช้ brand blue */
[data-theme="dark"] .st .nt-switch input:checked + .slider { background: var(--dk-brand); }


/* ============================================================
   ใบเสร็จ — เลือกแพคเกจ (billing-catalog) — wrapper .bc
   note: การ์ด/ปุ่มหลายตัวใช้ #fff literal (ไม่ผ่าน token) · CTA primary เป็นน้ำเงิน #0071E3 (คงไว้)
   ============================================================ */
[data-theme="dark"] .bc {
  --ink: var(--dk-ink);       --ink-2: var(--dk-ink-2);   --ink-3: var(--dk-ink-3);
  --muted: var(--dk-muted);   --muted-2: var(--dk-muted-2); --muted-3: var(--dk-muted-2);
  --hair: var(--dk-hair);     --hair-soft: var(--dk-hair-soft);
  --canvas: var(--dk-bg);     --surface: var(--dk-card);   --wash: var(--dk-sunken);
}
/* พื้นหน้า .bc / .app-content.bc ใช้ #F4F4F6 literal → ทับเป็นมืด (ไม่งั้นพื้นเทาอ่อนค้าง + heading สว่างจาง) */
[data-theme="dark"] .bc,
[data-theme="dark"] .app-content.bc { background: var(--dk-bg); }
/* literal #fff surfaces → มืด */
[data-theme="dark"] .bc .bc-card,
[data-theme="dark"] .bc .bc-panel-card,
[data-theme="dark"] .bc .bc-addon-row,
[data-theme="dark"] .bc .bc-mini-row,
[data-theme="dark"] .bc .bc-empty { background: var(--dk-card); }
/* ปุ่ม secondary (พื้น #fff) → dk-card-2 · ยกเว้น .bc-cta.is-ink ที่เป็นน้ำเงิน */
[data-theme="dark"] .bc .bc-cta:not(.is-ink),
[data-theme="dark"] .bc .bc-tab,
[data-theme="dark"] .bc .bc-mini-cta:not(.is-ink),
[data-theme="dark"] .bc .bc-addon-cta:not(.is-ink) { background: var(--dk-card-2); }


/* ============================================================
   ใบเสร็จ — ที่อยู่ใบกำกับภาษี (billing-addresses) — wrapper .ba
   ============================================================ */
[data-theme="dark"] .ba {
  --ink: var(--dk-ink);       --ink-2: var(--dk-ink-2);   --ink-3: var(--dk-ink-3);
  --muted: var(--dk-muted);   --muted-2: var(--dk-muted-2); --muted-3: var(--dk-muted-2);
  --hair: var(--dk-hair);     --hair-soft: var(--dk-hair-soft);
  --canvas: var(--dk-bg);     --surface: var(--dk-card);   --wash: var(--dk-sunken);
  --amber-bg: var(--dk-amber-bg); --amber-ink: var(--dk-amber-ink); --amber-line: var(--dk-amber-line);
  --ok-bg: var(--dk-leaf-bg);  --ok-ink: var(--dk-leaf);    --ok-line: var(--dk-leaf-line);
}
/* ink pill/icon/ปุ่ม (bg=var(--ink)→สว่าง) → พลิกตัวอักษรเข้ม + hover #000→โทนสว่าง */
[data-theme="dark"] .ba .btn-pill.is-ink,
[data-theme="dark"] .ba .ba-default-pill,
[data-theme="dark"] .ba .ba-card.is-default .ba-card-icon { color: #15171E; }
[data-theme="dark"] .ba .btn-pill.is-ink:hover { background: #D6D8DD; }


/* ============================================================
   จัดการผู้ใช้งาน (users-list) — wrapper .um
   ============================================================ */
[data-theme="dark"] .um {
  --ink: var(--dk-ink);       --ink-2: var(--dk-ink-2);   --ink-3: var(--dk-ink-3);
  --muted: var(--dk-muted);   --muted-2: var(--dk-muted-2); --muted-3: var(--dk-muted-2);
  --hair: var(--dk-hair);     --hair-soft: var(--dk-hair-soft);
  --canvas: var(--dk-bg);     --surface: var(--dk-card);   --wash: var(--dk-sunken);
  --ok-bg: var(--dk-leaf-bg);  --ok-ink: var(--dk-leaf);
  --bad-bg: var(--dk-rose-bg); --bad-ink: var(--dk-rose);
  --amber-bg: var(--dk-amber-bg);   /* --amber (#B45309 solid) คงเดิม */
  --info-bg: var(--dk-card-2); --info-ink: #AEB2D4;
}
[data-theme="dark"] .um .um-table thead th { background: var(--dk-sunken); color: var(--dk-ink-3); }
[data-theme="dark"] .um .btn-pill.is-ink { color: #15171E; }
[data-theme="dark"] .um .btn-pill.is-ink:hover { background: #D6D8DD; }


/* ============================================================
   ตั้งค่าบริษัท (company-profile) — wrapper body.cd
   note: ไม่มี token · hardcode + !important ทั้งหน้า → override ต้องใช้ !important
   (business-type chips สีหมวด = คงไว้)
   ============================================================ */
[data-theme="dark"] body.cd,
[data-theme="dark"] body.cd .app-content { background: var(--dk-bg) !important; }
/* การ์ด/พื้นผิว */
[data-theme="dark"] .cd .hr-card,
[data-theme="dark"] .cd .info-card,
[data-theme="dark"] .cd .info-card-edit,
[data-theme="dark"] .cd .transport-item,
[data-theme="dark"] .cd .modal-content { background: var(--dk-card) !important; }
/* secondary buttons + form controls (modal) */
[data-theme="dark"] .cd .modal .btn-secondary,
[data-theme="dark"] .cd .modal .btn-light,
[data-theme="dark"] .cd .modal .btn-outline-secondary,
[data-theme="dark"] .cd .modal .form-control,
[data-theme="dark"] .cd .modal .form-select { background: var(--dk-card-2) !important; color: var(--dk-ink) !important; }
/* เส้นขอบ */
[data-theme="dark"] .cd .hr-card,
[data-theme="dark"] .cd .info-card,
[data-theme="dark"] .cd .info-card-header,
[data-theme="dark"] .cd .info-row-item,
[data-theme="dark"] .cd .transport-item,
[data-theme="dark"] .cd .transport-del,
[data-theme="dark"] .cd .hr-add,
[data-theme="dark"] .cd .hr-actions button,
[data-theme="dark"] .cd .modal-header,
[data-theme="dark"] .cd .modal-footer,
[data-theme="dark"] .cd .modal .form-control,
[data-theme="dark"] .cd .modal .btn-secondary { border-color: var(--dk-hair) !important; }
/* ข้อความหลัก → สว่าง */
[data-theme="dark"] .cd .page-title,
[data-theme="dark"] .cd .info-row-item .info-val,
[data-theme="dark"] .cd .info-card-edit,
[data-theme="dark"] .cd .hr-add,
[data-theme="dark"] .cd .noti-bar a { color: var(--dk-ink) !important; }
/* ข้อความรอง/มิวต์ → muted สว่าง */
[data-theme="dark"] .cd .page-subtitle,
[data-theme="dark"] .cd .info-row-item .info-label,
[data-theme="dark"] .cd .modal .form-label,
[data-theme="dark"] .cd .modal .form-text { color: var(--dk-muted) !important; }
/* hover/wash */
[data-theme="dark"] .cd .hr-actions button:hover,
[data-theme="dark"] .cd .hr-add:hover,
[data-theme="dark"] .cd .info-card-edit:hover,
[data-theme="dark"] .cd .transport-item:hover { background: var(--dk-card-2) !important; }


/* ============================================================
   เพิ่ม/แก้ไข User (users-invite / users-edit) — wrapper .ui (บล็อกเดียวครอบ 2 หน้า)
   ============================================================ */
[data-theme="dark"] .ui {
  --ink: var(--dk-ink);       --ink-2: var(--dk-ink-2);   --ink-3: var(--dk-ink-3);
  --muted: var(--dk-muted);   --muted-2: var(--dk-muted-2);
  --hair: var(--dk-hair);     --hair-soft: var(--dk-hair-soft);
  --canvas: var(--dk-bg);     --surface: var(--dk-card);   --wash: var(--dk-sunken);
  --ok-bg: var(--dk-leaf-bg);  --ok-ink: var(--dk-leaf);
  --bad-bg: var(--dk-rose-bg); --bad-ink: var(--dk-rose);
  --amber-bg: var(--dk-amber-bg);   /* --amber (#B45309 solid, users-edit) คงเดิม */
  --info-bg: var(--dk-card-2); --info-ink: #AEB2D4;
}
[data-theme="dark"] .ui .btn-pill.is-ink { color: #15171E; }
[data-theme="dark"] .ui .btn-pill.is-ink:hover { background: #D6D8DD; }
/* progress "ความสมบูรณ์": track ไม่มี bg + .progress-bar (Bootstrap) ไม่มี height → ยุบมองไม่เห็น · ให้ track มืด + fill เต็มสูง (fill ใช้สี inline var(--clr-warning/success/danger)) */
[data-theme="dark"] .cd .progress-custom { background: var(--dk-card-2); border-radius: 999px; overflow: hidden; }
[data-theme="dark"] .cd .progress-bar { height: 100%; border-radius: 999px; }


/* ============================================================
   เอกสารยืนยันบริษัท (company-documents) — body.cd (ใช้ class .cd ร่วมกับ company-profile
   แต่หน้านี้ใช้ token-based palette → remap; company-profile เป็น hardcoded จัดการแยกด้านบนแล้ว)
   ============================================================ */
[data-theme="dark"] .cd {
  --ink: var(--dk-ink);       --ink-2: var(--dk-ink-2);   --ink-3: var(--dk-ink-3);
  --muted: var(--dk-muted);   --muted-2: var(--dk-muted-2); --muted-3: var(--dk-muted-2);
  --hair: var(--dk-hair);     --hair-soft: var(--dk-hair-soft);
  --canvas: var(--dk-bg);     --surface: var(--dk-card);   --wash: var(--dk-sunken);
  --ok-bg: var(--dk-leaf-bg);   --ok-ink: var(--dk-leaf);    --ok-line: var(--dk-leaf-line);
  --warn-bg: var(--dk-amber-bg); --warn-ink: var(--dk-amber-ink); --warn-line: var(--dk-amber-line);
  --bad-bg: var(--dk-rose-bg);  --bad-ink: var(--dk-rose);   --bad-line: var(--dk-rose-line);
  --info-bg: var(--dk-card-2);  --info-ink: #8FB4FF;         --info-line: var(--dk-hair);
}
[data-theme="dark"] .cd .cd-submit { color: #15171E; }   /* ปุ่มอัพโหลด ink → พลิกตัวอักษรเข้ม */
[data-theme="dark"] .cd .cd-file-input { background: var(--dk-card-2); color: var(--dk-ink); border-color: var(--dk-hair); }
[data-theme="dark"] .cd .cd-file-input::file-selector-button { background: var(--dk-card); color: var(--dk-ink); border-color: var(--dk-hair); }


/* ============================================================
   รายงาน (reports) — wrapper .rep (overview/category/geo/sources/time-to-hire/coming-soon)
   note: reports-posts/applicants/package/roi ใช้ --clr-* token (dark auto) · subnav = .rsub (global)
   ============================================================ */
[data-theme="dark"] .rep {
  --ink: var(--dk-ink);       --ink-2: var(--dk-ink-2);   --ink-3: var(--dk-ink-3);
  --muted: var(--dk-muted);   --muted-2: var(--dk-muted-2); --muted-3: var(--dk-muted-2);
  --hair: var(--dk-hair);     --hair-soft: var(--dk-hair-soft);
  --canvas: var(--dk-bg);     --surface: var(--dk-card);   --wash: var(--dk-sunken);
  --amber-bg: var(--dk-amber-bg); --amber-ink: var(--dk-amber-ink); --amber-line: var(--dk-amber-line);
  --ok-bg: var(--dk-leaf-bg);   --ok-ink: var(--dk-leaf);    --ok-line: var(--dk-leaf-line);
  --info-bg: var(--dk-card-2);  --info-ink: #8FB4FF;         --info-line: var(--dk-hair);
}

/* ===== SHARED PARTIAL · reports-subnav (.rsub) — แท็บเมนูรายงาน (ทุกหน้า reports) ===== */
[data-theme="dark"] .rsub { background: var(--dk-card); }
[data-theme="dark"] .rsub-tab { color: var(--dk-muted); }
[data-theme="dark"] .rsub-tab:hover { color: var(--dk-ink); }
/* active เดิมพื้นดำ(#0A0A0B)+ตัวขาว → mirror: พื้นสว่าง+ตัวอักษรเข้ม (เด่นบน track มืด) */
[data-theme="dark"] .rsub-tab.is-on { background: var(--dk-ink); color: #15171E; }

/* ============================================================
   PRINT — บังคับพิมพ์เป็น "ธีมขาว" เสมอทุกหน้า (ไม่เอา dark เข้าโรงพิมพ์)
   remap ทั้ง --clr-* (token กลาง) + --dk-* (page wrappers ที่ map ผ่าน --dk-*)
   → พื้นขาว/ตัวอักษรเข้ม แม้ผู้ใช้เปิด dark mode อยู่ (2026-07-06)
   ============================================================ */
@media print {
  [data-theme="dark"] {
    color-scheme: light;
    /* core tokens */
    --clr-bg: #FFFFFF; --clr-bg-card: #FFFFFF; --clr-bg-sidebar: #FFFFFF;
    --clr-bg-header: #FFFFFF; --clr-bg-footer: #FFFFFF; --clr-bg-input: #FFFFFF;
    --clr-bg-hover: #F3F3F3; --clr-bg-active: #EAF3FE; --clr-bg-sunken: #F7F7F7;
    --clr-text: #14161A; --clr-text-secondary: #3D3F46; --clr-text-muted: #6B6F76;
    --clr-text-inverse: #FFFFFF; --clr-text-link: #0071E3;
    --clr-border: #DDDDDD; --clr-border-light: #ECECEC; --clr-divider: #DDDDDD;
    /* canonical dark palette (--dk-*) → light equivalents */
    --dk-bg: #FFFFFF; --dk-card: #FFFFFF; --dk-card-2: #F5F5F5;
    --dk-sunken: #F7F7F7; --dk-chip: #EFEFEF;
    --dk-ink: #14161A; --dk-ink-2: #333333; --dk-ink-3: #555555;
    --dk-muted: #6B6F76; --dk-muted-2: #8A8E96;
    --dk-hair: #DDDDDD; --dk-hair-soft: #ECECEC; --dk-brand: #0071E3;
    --dk-amber-bg: #FEF3C7; --dk-amber-ink: #92400E; --dk-amber-line: #FDE68A;
    --dk-leaf-bg: #DCFCE7;  --dk-leaf: #166534;      --dk-leaf-line: #BBF7D0;
    --dk-rose-bg: #FEE2E2;  --dk-rose: #991B1B;      --dk-rose-line: #FECACA;
    --dk-sky-bg: #EFF6FF;   --dk-sky: #1D4ED8;       --dk-sky-line: #BFDBFE;
    --dk-ember-bg: #FFF4EB; --dk-ember-ink: #B23E04;
    --dk-violet-bg: #F5F3FF; --dk-violet: #6D28D9;
  }
  html[data-theme="dark"], [data-theme="dark"] body { background: #FFFFFF !important; }
  /* แถบเข้าใช้งานแทน (ส้ม) — chrome ไม่ต้องพิมพ์ */
  .app-alerts, .imp-banner { display: none !important; }
}