/* ==========================================================================
   ps-theme.css  v1  —  ธีมกลางของ performstat.app (KPI) และ work.performstat.app (Work Tracking)
   โทนเดียวกันทั้งสองแอป · มืดเป็นค่าเริ่มต้น · สลับสว่างได้ (data-theme="light")
   ไฟล์นี้เหมือนกันทั้งสองแอป ถ้าแก้ให้แก้ทั้งสองที่
   ========================================================================== */

/* ---------- 1. Design tokens (RGB triplets เพื่อใช้กับ alpha ได้) ---------- */
html {
  --c-bg: 9 13 28;
  --c-surface: 16 23 48;
  --c-surface2: 23 32 66;
  --c-surface3: 33 45 90;
  --c-line: 148 163 184;
  --c-text: 232 236 248;
  --c-text2: 190 199 222;
  --c-muted: 139 150 179;
  --c-accent: 129 140 248;
  --c-accent-strong: 99 102 241;
  --c-accent2: 34 211 238;
  --c-ok: 52 211 153;
  --c-warn: 251 191 36;
  --c-bad: 251 113 133;
  --c-info: 56 189 248;
  --ps-radius: 16px;
  --ps-radius-sm: 10px;
  --ps-shadow: 0 1px 0 rgb(255 255 255 / .03) inset, 0 12px 32px -12px rgb(2 6 23 / .65);
  --ps-glow: radial-gradient(900px 480px at 8% -8%, rgb(99 102 241 / .20), transparent 60%),
             radial-gradient(760px 420px at 100% 0%, rgb(34 211 238 / .10), transparent 55%);
  --ps-font: 'Sarabun', 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  color-scheme: dark;
}
html[data-theme="light"] {
  --c-bg: 243 245 251;
  --c-surface: 255 255 255;
  --c-surface2: 238 241 249;
  --c-surface3: 226 231 243;
  --c-line: 15 23 42;
  --c-text: 15 23 42;
  --c-text2: 51 65 85;
  --c-muted: 100 116 139;
  --c-accent: 79 70 229;
  --c-accent-strong: 67 56 202;
  --c-accent2: 8 145 178;
  --c-ok: 5 150 105;
  --c-warn: 180 83 9;
  --c-bad: 225 29 72;
  --c-info: 2 132 199;
  --ps-shadow: 0 1px 2px rgb(15 23 42 / .06), 0 10px 28px -14px rgb(15 23 42 / .22);
  --ps-glow: radial-gradient(900px 480px at 8% -8%, rgb(99 102 241 / .10), transparent 60%),
             radial-gradient(760px 420px at 100% 0%, rgb(8 145 178 / .07), transparent 55%);
  color-scheme: light;
}

/* ---------- 2. Base ---------- */
html { background: rgb(var(--c-bg)); }
html[data-theme] body {
  font-family: var(--ps-font);
  background-color: rgb(var(--c-bg));
  background-image: var(--ps-glow);
  background-repeat: no-repeat;
  background-attachment: fixed;
  color: rgb(var(--c-text));
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
html[data-theme] ::selection { background: rgb(var(--c-accent) / .35); }
html[data-theme] a { color: rgb(var(--c-accent)); }
html[data-theme] a:hover { color: rgb(var(--c-accent2)); }
html[data-theme] hr { border-color: rgb(var(--c-line) / .16); opacity: 1; }
html[data-theme] ::-webkit-scrollbar { width: 10px; height: 10px; }
html[data-theme] ::-webkit-scrollbar-thumb { background: rgb(var(--c-line) / .25); border-radius: 8px; }
html[data-theme] ::-webkit-scrollbar-track { background: transparent; }
.tabular, .ps-num { font-variant-numeric: tabular-nums; }

/* ---------- 3. Components (ps-*) — ใช้ในหน้าที่ออกแบบใหม่ ---------- */
.ps-appbar {
  position: sticky; top: 0; z-index: 50;
  background: rgb(var(--c-bg) / .78);
  backdrop-filter: saturate(160%) blur(16px); -webkit-backdrop-filter: saturate(160%) blur(16px);
  border-bottom: 1px solid rgb(var(--c-line) / .14);
}
.ps-appbar-inner { max-width: 1180px; margin: 0 auto; padding: 10px 20px; display: flex; align-items: center; gap: 14px; }
.ps-brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: rgb(var(--c-text)) !important; font-weight: 700; letter-spacing: .2px; }
.ps-brand img { height: 34px; width: 34px; border-radius: 10px; object-fit: cover; }
.ps-brand small { display: block; font-weight: 500; font-size: 11px; color: rgb(var(--c-muted)); letter-spacing: .3px; }
.ps-nav { display: flex; align-items: center; gap: 4px; margin-left: 10px; flex-wrap: wrap; }
.ps-nav a {
  padding: 7px 12px; border-radius: 10px; font-size: 14px; font-weight: 500; text-decoration: none;
  color: rgb(var(--c-text2)) !important; transition: background .15s, color .15s; white-space: nowrap;
}
.ps-nav a:hover { background: rgb(var(--c-line) / .10); color: rgb(var(--c-text)) !important; }
.ps-nav a.is-active { background: rgb(var(--c-accent) / .16); color: rgb(var(--c-accent)) !important; }
.ps-appbar-right { margin-left: auto; display: flex; align-items: center; gap: 8px; }

.ps-container { max-width: 1180px; margin: 0 auto; padding: 24px 20px 56px; }
.ps-hero h1 { font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.1rem); font-weight: 700; letter-spacing: -.01em; margin: 0; }
.ps-sub { color: rgb(var(--c-muted)); font-size: 14px; }

.ps-card {
  background: rgb(var(--c-surface)); border: 1px solid rgb(var(--c-line) / .14);
  border-radius: var(--ps-radius); box-shadow: var(--ps-shadow);
}
.ps-card-h { padding: 14px 18px; border-bottom: 1px solid rgb(var(--c-line) / .12); display: flex; flex-wrap: wrap; align-items: center; gap: 10px; justify-content: space-between; }
.ps-card-h h2, .ps-card-h h3 { font-size: 15px; font-weight: 700; margin: 0; display: flex; align-items: center; gap: 8px; }
.ps-card-b { padding: 18px; }
.ps-dot { width: 8px; height: 8px; border-radius: 99px; background: rgb(var(--c-accent)); box-shadow: 0 0 0 4px rgb(var(--c-accent) / .18); display: inline-block; }

.ps-grid-stats { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
.ps-stat { padding: 16px 18px; position: relative; overflow: hidden; }
.ps-stat .k { font-size: 12px; color: rgb(var(--c-muted)); font-weight: 600; letter-spacing: .4px; text-transform: uppercase; }
.ps-stat .v { font-size: clamp(1.25rem, 1rem + 1vw, 1.7rem); font-weight: 700; line-height: 1.2; margin-top: 4px; font-variant-numeric: tabular-nums; }
.ps-stat .s { font-size: 12px; color: rgb(var(--c-muted)); margin-top: 2px; }
.ps-stat::after { content: ""; position: absolute; right: -24px; top: -24px; width: 90px; height: 90px; border-radius: 50%; background: radial-gradient(circle, rgb(var(--c-accent) / .22), transparent 70%); }

.ps-seg { display: inline-flex; padding: 3px; gap: 2px; background: rgb(var(--c-surface2)); border: 1px solid rgb(var(--c-line) / .14); border-radius: 12px; }
.ps-seg button { border: 0; background: transparent; color: rgb(var(--c-text2)); padding: 6px 14px; border-radius: 9px; font-weight: 600; font-size: 13px; cursor: pointer; transition: all .15s; }
.ps-seg button:hover { color: rgb(var(--c-text)); }
.ps-seg button.is-active { background: linear-gradient(135deg, rgb(var(--c-accent-strong)), #8b5cf6); color: #fff; box-shadow: 0 6px 16px -6px rgb(var(--c-accent-strong) / .7); }

.ps-input {
  background: rgb(var(--c-surface2)); color: rgb(var(--c-text)); border: 1px solid rgb(var(--c-line) / .18);
  border-radius: var(--ps-radius-sm); padding: 7px 10px; font-size: 13px; outline: none; font-family: inherit;
  transition: border-color .15s, box-shadow .15s;
}
.ps-input:focus { border-color: rgb(var(--c-accent)); box-shadow: 0 0 0 3px rgb(var(--c-accent) / .22); }
.ps-label { font-size: 12px; color: rgb(var(--c-muted)); font-weight: 600; }

.ps-btn {
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer; text-decoration: none;
  border: 1px solid rgb(var(--c-line) / .18); background: rgb(var(--c-surface2)); color: rgb(var(--c-text)) !important;
  padding: 7px 14px; border-radius: var(--ps-radius-sm); font-size: 13px; font-weight: 600; font-family: inherit;
  transition: transform .12s, background .15s, border-color .15s, box-shadow .15s;
}
.ps-btn:hover { background: rgb(var(--c-surface3)); border-color: rgb(var(--c-line) / .32); }
.ps-btn:active { transform: translateY(1px); }
.ps-btn-primary {
  background: linear-gradient(135deg, rgb(var(--c-accent-strong)), #8b5cf6); border-color: transparent; color: #fff !important;
  box-shadow: 0 8px 20px -8px rgb(var(--c-accent-strong) / .8);
}
.ps-btn-primary:hover { background: linear-gradient(135deg, #5558e6, #7c4ff0); box-shadow: 0 10px 24px -8px rgb(var(--c-accent-strong) / .9); }
.ps-btn-ok { background: rgb(var(--c-ok) / .14); border-color: rgb(var(--c-ok) / .35); color: rgb(var(--c-ok)) !important; }
.ps-btn-danger { background: rgb(var(--c-bad) / .12); border-color: rgb(var(--c-bad) / .35); color: rgb(var(--c-bad)) !important; }
.ps-btn-sm { padding: 5px 10px; font-size: 12px; }

.ps-chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 999px; font-size: 13px; font-weight: 600;
  border: 1px solid rgb(var(--c-accent) / .45); background: rgb(var(--c-accent) / .16); color: rgb(var(--c-accent)); cursor: pointer;
  transition: all .15s; user-select: none;
}
.ps-chip:hover { transform: translateY(-1px); }
.ps-chip.is-off { background: transparent; border-color: rgb(var(--c-line) / .22); color: rgb(var(--c-muted)); text-decoration: line-through; }
.ps-chip.is-inactive { border-style: dashed; }

.ps-pill { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; border: 1px solid transparent; }
.ps-pill.ok   { background: rgb(var(--c-ok) / .14);   color: rgb(var(--c-ok));   border-color: rgb(var(--c-ok) / .30); }
.ps-pill.warn { background: rgb(var(--c-warn) / .14); color: rgb(var(--c-warn)); border-color: rgb(var(--c-warn) / .30); }
.ps-pill.bad  { background: rgb(var(--c-bad) / .14);  color: rgb(var(--c-bad));  border-color: rgb(var(--c-bad) / .30); }
.ps-pill.info { background: rgb(var(--c-info) / .14); color: rgb(var(--c-info)); border-color: rgb(var(--c-info) / .30); }
.ps-pill.mute { background: rgb(var(--c-line) / .10); color: rgb(var(--c-muted)); border-color: rgb(var(--c-line) / .18); }

.ps-table { width: 100%; border-collapse: separate; border-spacing: 0; }
.ps-table th { text-align: left; font-size: 12px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase; color: rgb(var(--c-muted)); padding: 12px 16px; background: rgb(var(--c-surface2) / .6); border-bottom: 1px solid rgb(var(--c-line) / .14); white-space: nowrap; }
.ps-table td { padding: 14px 16px; border-bottom: 1px solid rgb(var(--c-line) / .09); vertical-align: middle; }
.ps-table tbody tr { transition: background .12s; }
.ps-table tbody tr:hover { background: rgb(var(--c-accent) / .06); }
.ps-table tbody tr:last-child td { border-bottom: 0; }
.ps-table .c { text-align: center; }

.ps-rank { display: inline-flex; align-items: center; justify-content: center; min-width: 34px; height: 34px; border-radius: 11px; font-weight: 700; font-variant-numeric: tabular-nums; background: rgb(var(--c-surface2)); border: 1px solid rgb(var(--c-line) / .14); }
.ps-rank.r1 { background: linear-gradient(135deg, #fde68a, #f59e0b); color: #422006; border-color: transparent; box-shadow: 0 6px 16px -6px rgb(245 158 11 / .7); }
.ps-rank.r2 { background: linear-gradient(135deg, #e2e8f0, #94a3b8); color: #0f172a; border-color: transparent; }
.ps-rank.r3 { background: linear-gradient(135deg, #fdba74, #c2410c); color: #fff7ed; border-color: transparent; }
.ps-delta { font-size: 12px; font-weight: 700; margin-left: 6px; font-variant-numeric: tabular-nums; }
.ps-delta.up { color: rgb(var(--c-ok)); } .ps-delta.down { color: rgb(var(--c-bad)); } .ps-delta.same { color: rgb(var(--c-muted)); }

.ps-tier { display: inline-block; padding: 4px 12px; border-radius: 999px; font-size: 12px; font-weight: 700; white-space: nowrap; }
.ps-tier.t1 { background: rgb(var(--c-ok) / .18); color: rgb(var(--c-ok)); }
.ps-tier.t2 { background: rgb(var(--c-info) / .18); color: rgb(var(--c-info)); }
.ps-tier.t3 { background: rgb(var(--c-accent) / .18); color: rgb(var(--c-accent)); }
.ps-tier.t4 { background: rgb(var(--c-warn) / .18); color: rgb(var(--c-warn)); }
.ps-tier.t5 { background: rgb(251 146 60 / .18); color: #fb923c; }
.ps-tier.t6 { background: rgb(var(--c-bad) / .18); color: rgb(var(--c-bad)); }

.ps-bar { height: 8px; border-radius: 99px; background: rgb(var(--c-line) / .14); overflow: hidden; }
.ps-bar > span { display: block; height: 100%; border-radius: 99px; transition: width .8s cubic-bezier(.2,.8,.2,1); }
.ps-bar .ok { background: linear-gradient(90deg, #10b981, #34d399); }
.ps-bar .warn { background: linear-gradient(90deg, #f59e0b, #fbbf24); }
.ps-bar .bad { background: linear-gradient(90deg, #e11d48, #fb7185); }

.ps-skel { position: relative; overflow: hidden; background: rgb(var(--c-line) / .10); border-radius: 8px; min-height: 16px; }
.ps-skel::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient(90deg, transparent, rgb(var(--c-line) / .16), transparent); animation: ps-shimmer 1.3s infinite; }
@keyframes ps-shimmer { 100% { transform: translateX(100%); } }

.ps-banner { border-radius: 14px; padding: 12px 16px; font-size: 14px; display: flex; gap: 10px; align-items: flex-start; }
.ps-banner.warn { background: rgb(var(--c-warn) / .12); border: 1px solid rgb(var(--c-warn) / .30); color: rgb(var(--c-warn)); }
.ps-banner.info { background: rgb(var(--c-info) / .10); border: 1px solid rgb(var(--c-info) / .28); color: rgb(var(--c-info)); }
.ps-banner.bad  { background: rgb(var(--c-bad) / .10);  border: 1px solid rgb(var(--c-bad) / .28);  color: rgb(var(--c-bad)); }
.ps-banner.ok   { background: rgb(var(--c-ok) / .10);   border: 1px solid rgb(var(--c-ok) / .28);   color: rgb(var(--c-ok)); }

.ps-theme-toggle {
  width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
  border-radius: 11px; border: 1px solid rgb(var(--c-line) / .18); background: rgb(var(--c-surface2)); color: rgb(var(--c-text2));
  transition: background .15s, transform .15s;
}
.ps-theme-toggle:hover { background: rgb(var(--c-surface3)); transform: rotate(14deg); }
.ps-theme-toggle .i-sun { display: none; } .ps-theme-toggle .i-moon { display: block; }
html[data-theme="light"] .ps-theme-toggle .i-sun { display: block; }
html[data-theme="light"] .ps-theme-toggle .i-moon { display: none; }
.ps-theme-toggle.is-floating { position: fixed; right: 16px; bottom: 16px; z-index: 1080; box-shadow: var(--ps-shadow); }

.ps-fade { animation: ps-fade .35s ease-out both; }
@keyframes ps-fade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }
@media (max-width: 720px) {
  .ps-appbar-inner { padding: 8px 12px; flex-wrap: wrap; }
  .ps-nav { order: 3; width: 100%; margin-left: 0; overflow-x: auto; flex-wrap: nowrap; }
  .ps-container { padding: 16px 12px 40px; }
  .ps-table th, .ps-table td { padding: 10px; }
}

/* ---------- 4. Tailwind legacy pages (KPI): ปรับคลาสสำเร็จรูปที่ฝังสีไว้ ---------- */
html[data-theme] .toolbar-card, html[data-theme] .card { background: rgb(var(--c-surface)); border: 1px solid rgb(var(--c-line) / .14); border-radius: var(--ps-radius); box-shadow: var(--ps-shadow); }
html[data-theme] .chip { background: rgb(var(--c-surface2)); border: 1px solid rgb(var(--c-line) / .14); color: rgb(var(--c-text2)); }
html[data-theme] .btn-blue { background: linear-gradient(135deg, rgb(var(--c-accent-strong)), #8b5cf6); color: #fff; border-radius: var(--ps-radius-sm); }
html[data-theme] .btn-blue:hover { filter: brightness(1.08); }
html[data-theme] .btn-green { background: rgb(5 150 105); color: #fff; border-radius: var(--ps-radius-sm); }
html[data-theme] .btn-green:hover { background: rgb(4 120 87); }
html[data-theme] .btn-slate, html[data-theme] .btn-gray { background: rgb(var(--c-surface3)); color: rgb(var(--c-text)); border-radius: var(--ps-radius-sm); }
html[data-theme] .btn-slate:hover, html[data-theme] .btn-gray:hover { background: rgb(var(--c-line) / .25); }
html[data-theme] .input-dark, html[data-theme] .input { background: rgb(var(--c-surface2)); color: rgb(var(--c-text)); border: 1px solid rgb(var(--c-line) / .20); border-radius: var(--ps-radius-sm); }
html[data-theme] input[type="text"], html[data-theme] input[type="password"], html[data-theme] input[type="date"],
html[data-theme] input[type="month"], html[data-theme] input[type="number"], html[data-theme] select, html[data-theme] textarea { font-family: inherit; }
html[data-theme] input:focus, html[data-theme] select:focus, html[data-theme] textarea:focus { outline: none; box-shadow: 0 0 0 3px rgb(var(--c-accent) / .25); border-color: rgb(var(--c-accent)) !important; }
html[data-theme] table { border-collapse: collapse; }
html[data-theme] .rounded-lg { border-radius: var(--ps-radius); }
html[data-theme] .shadow, html[data-theme] .shadow-xl { box-shadow: var(--ps-shadow); }
html[data-theme="light"] .text-white:not([class*="bg-"]) { color: rgb(var(--c-text)); }
html[data-theme="light"] .text-green-400 { color: rgb(var(--c-ok)); }
html[data-theme="light"] .text-red-400, html[data-theme="light"] .text-red-300, html[data-theme="light"] .text-red-500 { color: rgb(var(--c-bad)); }
html[data-theme="light"] .text-yellow-400, html[data-theme="light"] .text-yellow-500, html[data-theme="light"] .text-yellow-300 { color: rgb(var(--c-warn)); }
html[data-theme="light"] .text-blue-400, html[data-theme="light"] .text-blue-300, html[data-theme="light"] .text-sky-400, html[data-theme="light"] .text-sky-300 { color: rgb(var(--c-accent)); }
html[data-theme="light"] .text-orange-400 { color: #c2410c; }
html[data-theme="light"] .text-purple-400 { color: #7e22ce; }

/* ---------- 5. Bootstrap 5.3 (work app) ---------- */
html[data-theme] {
  --bs-body-bg: rgb(var(--c-bg));
  --bs-body-color: rgb(var(--c-text));
  --bs-secondary-color: rgb(var(--c-muted));
  --bs-border-color: rgb(var(--c-line) / .18);
  --bs-primary: rgb(var(--c-accent-strong));
  --bs-link-color: rgb(var(--c-accent));
  --bs-link-hover-color: rgb(var(--c-accent2));
}
html[data-theme] .navbar, html[data-theme] .navbar.bg-dark {
  background: rgb(var(--c-bg) / .78) !important;
  backdrop-filter: saturate(160%) blur(16px); -webkit-backdrop-filter: saturate(160%) blur(16px);
  border-bottom: 1px solid rgb(var(--c-line) / .14); box-shadow: none !important;
}
html[data-theme] .navbar .navbar-brand { color: rgb(var(--c-text)) !important; font-weight: 700; letter-spacing: .2px; }
html[data-theme] .navbar .nav-link { color: rgb(var(--c-text2)) !important; border-radius: 10px; padding: 7px 12px !important; transition: background .15s; }
html[data-theme] .navbar .nav-link:hover { background: rgb(var(--c-line) / .10); }
html[data-theme] .navbar .nav-link.active { background: rgb(var(--c-accent) / .16); color: rgb(var(--c-accent)) !important; font-weight: 600; }
html[data-theme] .navbar .text-white, html[data-theme] .navbar .navbar-text { color: rgb(var(--c-text)) !important; }
html[data-theme] .navbar .text-white-50 { color: rgb(var(--c-muted)) !important; }
html[data-theme] .navbar-toggler { border-color: rgb(var(--c-line) / .25); }
html[data-theme="dark"] .navbar-toggler-icon { filter: invert(1) brightness(1.4); }
html[data-theme="light"] .navbar-toggler-icon { filter: none; }

html[data-theme] .card { background: rgb(var(--c-surface)); color: rgb(var(--c-text)); border: 1px solid rgb(var(--c-line) / .14); border-radius: var(--ps-radius); box-shadow: var(--ps-shadow); }
html[data-theme] .card-header, html[data-theme] .card-footer { background: rgb(var(--c-surface2) / .55); border-color: rgb(var(--c-line) / .12); color: rgb(var(--c-text)); }
html[data-theme] .card-header:first-child { border-radius: var(--ps-radius) var(--ps-radius) 0 0; }
html[data-theme] .card-header.bg-primary, html[data-theme] .card-header.bg-success, html[data-theme] .card-header.bg-danger,
html[data-theme] .card-header.bg-warning, html[data-theme] .card-header.bg-info, html[data-theme] .card-header.bg-secondary,
html[data-theme] .card-header.bg-dark { color: #fff; }
html[data-theme] .bg-light, html[data-theme] .bg-white { background-color: rgb(var(--c-surface2)) !important; color: rgb(var(--c-text)); }
html[data-theme] body.bg-light, html[data-theme] body.bg-white { background-color: rgb(var(--c-bg)) !important; }
html[data-theme] .text-dark { color: rgb(var(--c-text)) !important; }
html[data-theme] .text-muted, html[data-theme] .text-secondary { color: rgb(var(--c-muted)) !important; }
html[data-theme] .border, html[data-theme] .border-top, html[data-theme] .border-bottom, html[data-theme] .border-start, html[data-theme] .border-end { border-color: rgb(var(--c-line) / .16) !important; }

html[data-theme] .btn { border-radius: var(--ps-radius-sm); font-weight: 600; transition: transform .12s, box-shadow .15s, background .15s, filter .15s; }
html[data-theme] .btn:active { transform: translateY(1px); }
html[data-theme] .btn-primary { background: linear-gradient(135deg, rgb(var(--c-accent-strong)), #8b5cf6); border-color: transparent; color: #fff; box-shadow: 0 8px 20px -10px rgb(var(--c-accent-strong) / .85); }
html[data-theme] .btn-primary:hover, html[data-theme] .btn-primary:focus { background: linear-gradient(135deg, #5558e6, #7c4ff0); border-color: transparent; color: #fff; }
html[data-theme] .btn-outline-primary { color: rgb(var(--c-accent)); border-color: rgb(var(--c-accent) / .5); }
html[data-theme] .btn-outline-primary:hover { background: rgb(var(--c-accent) / .16); color: rgb(var(--c-accent)); }
html[data-theme] .btn-outline-secondary { color: rgb(var(--c-text2)); border-color: rgb(var(--c-line) / .3); }
html[data-theme] .btn-outline-secondary:hover { background: rgb(var(--c-line) / .14); color: rgb(var(--c-text)); border-color: rgb(var(--c-line) / .4); }
html[data-theme] .btn-light { background: rgb(var(--c-surface2)); border-color: rgb(var(--c-line) / .18); color: rgb(var(--c-text)); }
html[data-theme] .btn-light:hover { background: rgb(var(--c-surface3)); color: rgb(var(--c-text)); }
html[data-theme] .btn-close { filter: none; }
html[data-theme="dark"] .btn-close { filter: invert(1) grayscale(1) brightness(1.6); }

html[data-theme] .form-control, html[data-theme] .form-select, html[data-theme] .input-group-text {
  background-color: rgb(var(--c-surface2)); color: rgb(var(--c-text)); border: 1px solid rgb(var(--c-line) / .2); border-radius: var(--ps-radius-sm);
}
html[data-theme] .form-control::placeholder { color: rgb(var(--c-muted) / .8); }
html[data-theme] .form-control:focus, html[data-theme] .form-select:focus {
  background-color: rgb(var(--c-surface2)); color: rgb(var(--c-text)); border-color: rgb(var(--c-accent)); box-shadow: 0 0 0 3px rgb(var(--c-accent) / .22);
}
html[data-theme] .form-control:disabled, html[data-theme] .form-select:disabled, html[data-theme] .form-control[readonly] { background-color: rgb(var(--c-surface3) / .6); opacity: .8; }
html[data-theme] .form-check-input { background-color: rgb(var(--c-surface2)); border-color: rgb(var(--c-line) / .35); }
html[data-theme] .form-check-input:checked { background-color: rgb(var(--c-accent-strong)); border-color: rgb(var(--c-accent-strong)); }
html[data-theme] .form-label, html[data-theme] label { color: rgb(var(--c-text2)); }
html[data-theme] .form-text { color: rgb(var(--c-muted)); }

html[data-theme] .table {
  --bs-table-bg: transparent; --bs-table-color: rgb(var(--c-text));
  --bs-table-border-color: rgb(var(--c-line) / .12);
  --bs-table-striped-bg: rgb(var(--c-line) / .05); --bs-table-striped-color: rgb(var(--c-text));
  --bs-table-hover-bg: rgb(var(--c-accent) / .07); --bs-table-hover-color: rgb(var(--c-text));
}
html[data-theme] .table > thead > tr > th, html[data-theme] .table-light, html[data-theme] .table-light > th, html[data-theme] .table-light > td,
html[data-theme] thead.table-light th, html[data-theme] .table > :not(caption) > .table-light > * {
  background-color: rgb(var(--c-surface2)) !important; color: rgb(var(--c-muted)) !important;
  font-size: .78rem; text-transform: uppercase; letter-spacing: .4px; font-weight: 700; border-bottom-color: rgb(var(--c-line) / .14) !important;
}
html[data-theme] .table-responsive { border-radius: var(--ps-radius-sm); }
html[data-theme] .list-group-item { background: transparent; color: rgb(var(--c-text)); border-color: rgb(var(--c-line) / .12); }
html[data-theme] .list-group-item-action:hover { background: rgb(var(--c-accent) / .08); color: rgb(var(--c-text)); }

html[data-theme] .nav-tabs { border-bottom: 1px solid rgb(var(--c-line) / .16); gap: 4px; }
html[data-theme] .nav-tabs .nav-link { border: 0; border-radius: 10px 10px 0 0; color: rgb(var(--c-text2)); font-weight: 500; padding: 9px 14px; }
html[data-theme] .nav-tabs .nav-link:hover { background: rgb(var(--c-line) / .10); color: rgb(var(--c-text)); }
html[data-theme] .nav-tabs .nav-link.active { background: rgb(var(--c-accent) / .14); color: rgb(var(--c-accent)); font-weight: 700; border: 0; border-bottom: 3px solid rgb(var(--c-accent-strong)); }
html[data-theme] .nav-pills .nav-link.active { background: linear-gradient(135deg, rgb(var(--c-accent-strong)), #8b5cf6); color: #fff; }

html[data-theme] .modal-content { background: rgb(var(--c-surface)); color: rgb(var(--c-text)); border: 1px solid rgb(var(--c-line) / .16); border-radius: 20px; box-shadow: 0 30px 80px -20px rgb(0 0 0 / .6); }
html[data-theme] .modal-header, html[data-theme] .modal-footer { border-color: rgb(var(--c-line) / .12); }
html[data-theme] .modal-backdrop.show { opacity: .6; }
html[data-theme] .dropdown-menu { background: rgb(var(--c-surface)); border: 1px solid rgb(var(--c-line) / .16); border-radius: 14px; box-shadow: var(--ps-shadow); }
html[data-theme] .dropdown-item { color: rgb(var(--c-text2)); border-radius: 8px; }
html[data-theme] .dropdown-item:hover { background: rgb(var(--c-accent) / .12); color: rgb(var(--c-text)); }

html[data-theme] .alert { border-radius: 14px; border-width: 1px; }
html[data-theme] .alert-success { background: rgb(var(--c-ok) / .12); border-color: rgb(var(--c-ok) / .32); color: rgb(var(--c-ok)); }
html[data-theme] .alert-danger  { background: rgb(var(--c-bad) / .11); border-color: rgb(var(--c-bad) / .32); color: rgb(var(--c-bad)); }
html[data-theme] .alert-warning { background: rgb(var(--c-warn) / .12); border-color: rgb(var(--c-warn) / .32); color: rgb(var(--c-warn)); }
html[data-theme] .alert-info    { background: rgb(var(--c-info) / .11); border-color: rgb(var(--c-info) / .32); color: rgb(var(--c-info)); }
html[data-theme] .badge { font-weight: 600; border-radius: 999px; }
html[data-theme] .progress { background: rgb(var(--c-line) / .14); border-radius: 99px; }
html[data-theme] .accordion-item, html[data-theme] .accordion-button { background: rgb(var(--c-surface)); color: rgb(var(--c-text)); border-color: rgb(var(--c-line) / .14); }
html[data-theme] .offcanvas, html[data-theme] .popover { background: rgb(var(--c-surface)); color: rgb(var(--c-text)); }

/* ---------- 6. work app: คลาสเฉพาะที่ฝังสีสว่างไว้ ---------- */
html[data-theme] .work-card-hero { background: rgb(var(--c-surface)); border: 1px solid rgb(var(--c-line) / .16); border-radius: 22px; box-shadow: var(--ps-shadow); }
html[data-theme] .work-card-hero:hover { box-shadow: 0 18px 40px -16px rgb(var(--c-accent-strong) / .5); }
html[data-theme] .work-card-hero.done { border: 1px solid rgb(var(--c-ok) / .55); background: linear-gradient(180deg, rgb(var(--c-ok) / .10), rgb(var(--c-surface))); }
html[data-theme] .work-card-title { color: rgb(var(--c-text)); }
html[data-theme] .work-card-subtitle, html[data-theme] .user-time-label, html[data-theme] .mobile-label { color: rgb(var(--c-muted)); }
html[data-theme] .done-stamp { color: rgb(var(--c-ok)); }
html[data-theme] .btn-finish-hero { background: linear-gradient(135deg, rgb(var(--c-accent-strong)), #8b5cf6); border: 0; color: #fff; box-shadow: 0 10px 26px -10px rgb(var(--c-accent-strong) / .9); letter-spacing: .5px; }
html[data-theme] .progress-container { background: rgb(var(--c-line) / .16); }
html[data-theme] .progress-text { color: rgb(var(--c-text)); text-shadow: none; }
html[data-theme] .user-row { border-bottom-color: rgb(var(--c-line) / .12); }
html[data-theme] .debug-bar { background: rgb(var(--c-surface2)); color: rgb(var(--c-text2)); }
html[data-theme] .stat-card { border: 1px solid rgb(var(--c-line) / .12); box-shadow: var(--ps-shadow); }
@media (max-width: 768px) {
  html[data-theme] .mobile-card-table tr, html[data-theme] .mobile-card-table tbody tr { background: rgb(var(--c-surface)); border-color: rgb(var(--c-line) / .16); }
  html[data-theme] .mobile-card-table tbody td { border-bottom-color: rgb(var(--c-line) / .1); }
}

/* ---------- 7. work app: จัดการ component สำคัญให้เข้าโทนเดียวกับ KPI ---------- */
html[data-theme] .stat-card { border: 0; }
html[data-theme] .stat-card.bg-gradient-primary { background: linear-gradient(135deg, #6366f1, #8b5cf6); color: #fff; }
html[data-theme] .stat-card.bg-gradient-success { background: linear-gradient(135deg, #10b981, #06b6d4); color: #fff; }
html[data-theme] .stat-card.bg-gradient-warning { background: linear-gradient(135deg, #f59e0b, #f97316); color: #1c1917; }
html[data-theme] .card-header.bg-dark {
  background: rgb(var(--c-surface2)) !important; color: rgb(var(--c-text)) !important;
  border-bottom: 1px solid rgb(var(--c-line) / .12); box-shadow: inset 3px 0 0 rgb(var(--c-accent-strong));
}
html[data-theme] .bg-primary, html[data-theme] .card-header.bg-primary {
  background: linear-gradient(135deg, rgb(var(--c-accent-strong)), #8b5cf6) !important; color: #fff !important;
}
html[data-theme] .text-primary { color: rgb(var(--c-accent)) !important; }
html[data-theme] .border-warning, html[data-theme] .border-info { border-color: rgb(var(--c-line) / .22) !important; }
html[data-theme] label.text-muted, html[data-theme] .card form label { white-space: nowrap; }
html[data-theme] .alert-light { background: rgb(var(--c-surface2)); border-color: rgb(var(--c-line) / .16); color: rgb(var(--c-text2)); }
html[data-theme] .alert-secondary { background: rgb(var(--c-line) / .10); border-color: rgb(var(--c-line) / .18); color: rgb(var(--c-text2)); }
html[data-theme] .text-secondary { color: rgb(var(--c-muted)) !important; }
html[data-theme] .badge.bg-secondary { background: rgb(var(--c-line) / .22) !important; color: rgb(var(--c-text2)); }
html[data-theme] .form-control.border-0.bg-transparent { background: transparent !important; }