/* ══════════════════════════════════════════════════════════════
   ERP Design System — Premium Modern UI
   Palette: Indigo/Violet · Slate neutrals · soft shadows
   ══════════════════════════════════════════════════════════════ */

:root {
    --brand: #4f46e5;
    --brand-2: #7c3aed;
    --brand-600: #4338ca;
    --brand-700: #3730a3;
    --brand-soft: #eef2ff;
    --ink: #0f172a;
    --ink-2: #334155;
    --muted: #556376;
    --faint: #94a3b8;
    --line: #e2e8f0;
    --line-soft: #f1f5f9;
    --bg: #f1f5f9;
    --card: #ffffff;
    --ok: #10b981;
    --ok-deep: #047857;
    --ok-soft: #ecfdf5;
    --warn: #f59e0b;
    --warn-deep: #b45309;
    --warn-soft: #fffbeb;
    --danger: #ef4444;
    --danger-deep: #b91c1c;
    --danger-soft: #fef2f2;
    --info: #3b82f6;
    --info-deep: #1d4ed8;
    --info-soft: #eff6ff;
    --purple: #8b5cf6;
    --donut-1: #dc3545;
    --donut-2: #0d6efd;
    --donut-3: #e8a13c;
    --donut-4: #198754;
    --donut-5: #b02a37;
    --donut-6: #7c8b9d;
    --donut-teal: #0E8F8B;
    --r-lg: 16px;
    --r-md: 12px;
    --r-sm: 9px;
    --sh-sm: 0 1px 2px rgba(15, 23, 42, .05), 0 2px 8px rgba(15, 23, 42, .04);
    --sh-md: 0 4px 12px rgba(15, 23, 42, .07), 0 14px 34px rgba(15, 23, 42, .07);
    --sh-lg: 0 20px 48px rgba(15, 23, 42, .16);
    --font: "Inter", "Noto Sans Thai", "Sarabun", "Segoe UI", sans-serif;
    --side-w: 272px;
}

* { box-sizing: border-box; }

html { font-size: 15px; }
@media (min-width: 768px) { html { font-size: 16px; } }

body {
    margin: 0;
    font-family: var(--font);
    background:
        radial-gradient(1200px 500px at 85% -10%, rgba(99, 102, 241, .07), transparent 60%),
        radial-gradient(900px 420px at -10% 110%, rgba(139, 92, 246, .06), transparent 55%),
        var(--bg);
    color: var(--ink);
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
    /* B144: ความชัดฟอนต์ — กันเบราว์เซอร์สังเคราะห์หนา/เอียงปลอม (ใช้เฉพาะน้ำหนักที่โหลดจริง) + line-height 1.5 รองรับสระบน/วรรณยุกต์ไทย */
    font-synthesis: none;
    line-height: 1.5;
}

/* ── Scrollbar ─────────────────────────────────────────────── */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 8px; border: 2px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-thumb:hover { background: #94a3b8; background-clip: content-box; }
* { scrollbar-width: thin; scrollbar-color: #cbd5e1 transparent; }

/* ── Sidebar ───────────────────────────────────────────────── */
.sidebar {
    position: fixed;
    top: 0; left: 0; bottom: 0;
    width: var(--side-w);
    z-index: 60;
    display: flex;
    flex-direction: column;
    color: #cbd5e1;
    background:
        radial-gradient(420px 240px at 20% -5%, rgba(99, 102, 241, .28), transparent 60%),
        radial-gradient(380px 300px at 110% 105%, rgba(139, 92, 246, .22), transparent 55%),
        linear-gradient(180deg, #0b1220 0%, #121a33 55%, #191241 100%);
    box-shadow: 8px 0 32px rgba(15, 23, 42, .22);
    transition: transform .25s ease;
}

.side-brand {
    display: flex; align-items: center; gap: 12px;
    padding: 20px 22px 16px;
    text-decoration: none;
}
.brand-mark {
    width: 42px; height: 42px; flex: none;
    border-radius: 13px;
    display: grid; place-items: center;
    font-weight: 800; font-size: 1.2rem; color: #fff;
    background: linear-gradient(135deg, var(--brand), var(--brand-2));
    box-shadow: 0 6px 18px color-mix(in srgb, var(--brand) 45%, transparent), inset 0 1px 0 rgba(255, 255, 255, .25);
    letter-spacing: -.02em;
}
.brand-mark img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; display: block; }
.brand-text { display: flex; flex-direction: column; line-height: 1.15; }
.brand-text strong { color: #fff; font-size: 1.15rem; font-weight: 800; letter-spacing: .12em; }
.brand-text small { color: #7c8db5; font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; margin-top: 2px; }

.side-nav {
    flex: 1;
    overflow-y: auto;
    padding: 6px 14px 18px;
}
.side-nav::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .14); }

.nav-group { margin-bottom: 2px; }
.nav-group-head {
    width: 100%;
    display: flex; align-items: center; justify-content: space-between;
    padding: 8px 10px 6px;
    background: none; border: none; cursor: pointer;
    color: #64748b;
    font: 600 .8rem/1.25 var(--font);
}
.nav-group-head .chev {
    font-size: .62rem; color: #475569;
    transition: transform .18s ease;
}
.nav-group:not(.open) .chev { transform: rotate(-90deg); }
.nav-group-body { overflow: hidden; transition: max-height .22s ease; }
.nav-group:not(.open) .nav-group-body { max-height: 0 !important; }

/* หัวข้อย่อยภายในกลุ่มเมนู (เช่น ข้อมูลหลัก / ธุรกรรมรายวัน / รายงาน) */
.nav-sub {
    padding: 12px 12px 3px;
    font: 700 .78rem/1.25 var(--font);
    color: #64748b;
}
.nav-sub:first-child { padding-top: 4px; }

.nav-link {
    display: flex; align-items: center; gap: 11px;
    padding: 9px 12px;
    margin: 1px 0;
    border-radius: 11px;
    color: #a8b6cf;
    font-size: .9rem; font-weight: 600;
    text-decoration: none;
    transition: background .16s, color .16s;
}
.nav-link .ico, .nav-link i.bi { width: 22px; flex: none; text-align: center; font-size: 1.05rem; opacity: .92; }
.nav-link i.bi { line-height: 1; color: inherit; }
.nav-link:hover { color: #fff; background: rgba(255, 255, 255, .07); }
.nav-link.active {
    color: #fff;
    background: linear-gradient(135deg, rgba(99, 102, 241, .32), rgba(139, 92, 246, .22));
    box-shadow: inset 0 0 0 1px rgba(139, 92, 246, .4), 0 4px 14px rgba(79, 70, 229, .22);
}

.side-foot {
    padding: 14px 18px;
    border-top: 1px solid rgba(148, 163, 184, .14);
    display: flex; align-items: center; gap: 11px;
}
.side-foot .avatar {
    width: 38px; height: 38px; flex: none;
    border-radius: 50%;
    display: grid; place-items: center;
    color: #fff; font-weight: 700; font-size: .92rem;
    background: linear-gradient(135deg, #0ea5e9, #6366f1);
    box-shadow: 0 4px 12px rgba(14, 165, 233, .4);
}
.side-foot .side-foot-info { min-width: 0; }
.side-foot .side-foot-info strong { display: block; color: #e2e8f0; font-size: .9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.side-foot .side-foot-info small { color: #7c8db5; font-size: .78rem; }
.side-foot .btn-logout {
    margin-left: auto; flex: none;
    background: none; border: none; cursor: pointer;
    color: #64748b; font-size: 1rem; padding: 8px;
    border-radius: 9px; transition: .16s;
}
.side-foot .btn-logout:hover { color: #fca5a5; background: rgba(239, 68, 68, .12); }

.backdrop {
    display: none;
    position: fixed; inset: 0; z-index: 55;
    background: rgba(15, 23, 42, .5);
    backdrop-filter: blur(2px);
}

/* ── Shell / Topbar ────────────────────────────────────────── */
.shell { margin-left: var(--side-w); min-height: 100vh; display: flex; flex-direction: column; transition: margin-left .25s ease; }

/* ซ่อน/แสดงเมนูซ้าย (ปุ่ม ☰ topbar) — เนื้อหาขยายเต็มจอ */
body.nav-collapsed .sidebar { transform: translateX(-105%); }
body.nav-collapsed .shell { margin-left: 0; }

.topbar {
    position: sticky; top: 0; z-index: 50;
    height: 62px;
    display: flex; align-items: center; gap: 14px;
    padding: 0 26px;
    background: rgba(255, 255, 255, .85);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--line);
}
.menu-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: none; border: 1px solid var(--line); border-radius: 10px;
    width: 38px; height: 38px; font-size: 1.05rem; cursor: pointer;
    color: var(--ink-2); transition: .16s;
}
.menu-btn:hover { background: var(--brand-soft); border-color: #c7d2fe; }
.top-title {
    font-weight: 700; font-size: 1.02rem; color: var(--ink);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.top-spacer { flex: 1; }
.top-date { color: var(--muted); font-size: .84rem; white-space: nowrap; }

.user-menu { position: relative; }
.user-chip {
    display: flex; align-items: center; gap: 10px;
    background: #fff; border: 1px solid var(--line); border-radius: 999px;
    padding: 5px 12px 5px 6px; cursor: pointer;
    transition: border-color .16s, box-shadow .16s;
}
.user-chip:hover { border-color: #c7d2fe; box-shadow: var(--sh-sm); }
.user-chip .avatar {
    width: 32px; height: 32px; border-radius: 50%;
    display: grid; place-items: center;
    color: #fff; font-weight: 700; font-size: .82rem;
    background: linear-gradient(135deg, var(--brand), var(--brand-2));
}
.user-chip .user-name { font-weight: 600; font-size: .88rem; color: var(--ink-2); max-width: 150px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.user-chip .caret { color: var(--faint); font-size: .72rem; }

.menu-drop {
    position: absolute; right: 0; top: calc(100% + 8px);
    min-width: 230px;
    background: #fff; border: 1px solid var(--line); border-radius: 14px;
    box-shadow: var(--sh-lg);
    padding: 7px;
    display: none;
    animation: dropIn .16s ease;
}
.menu-drop.open { display: block; }
@keyframes dropIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.menu-item {
    display: flex; width: 100%; align-items: center; gap: 10px;
    padding: 10px 12px; border: none; background: none; cursor: pointer;
    border-radius: 10px; font: 500 .9rem var(--font); color: var(--ink-2);
    text-decoration: none; text-align: left;
    transition: background .15s;
}
.menu-item:hover { background: var(--brand-soft); color: var(--brand-700); }
.menu-item.danger { color: var(--danger-deep); }
.menu-item.danger:hover { background: var(--danger-soft); }
.lang-row {
    display: flex; gap: 4px; padding: 4px 6px 8px; margin-bottom: 6px;
    border-bottom: 1px solid var(--line);
}
.lang-row a.lang-link {
    flex: 1; text-align: center; text-decoration: none;
    padding: 6px 4px; border-radius: 8px;
    font: 600 .78rem var(--font); color: var(--ink-2);
    background: #f1f5f9; transition: background .15s, color .15s;
    display: flex; flex-direction: column; align-items: center; gap: 3px;
}
.lang-row a.lang-link:hover { background: var(--brand-soft); color: var(--brand-700); }
.lang-flag {
    width: 17px; height: 12px; object-fit: cover;
    border-radius: 2px; border: 1px solid rgba(0,0,0,.14);
    display: block;
}

/* ปักหมุดเมนู (favorites) */
.side-nav a.nav-link { position: relative; }
.pin-btn {
    display: none;
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    font-size: .9rem;
    line-height: 1;
    color: #94a3b8;
    cursor: pointer;
    padding: 0 2px;
}
.side-nav a.nav-link:hover .pin-btn,
.pin-btn.on { display: inline-block; }
.pin-btn.on { color: #f59e0e; }

/* ── Content ───────────────────────────────────────────────── */
.content {
    flex: 1;
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
    padding: 26px 28px 64px;
    animation: fadeUp .35s ease both;
}
@keyframes fadeUp {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
    .content { animation: none; }
    * { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}
.content.standalone { margin-left: 0; }

h1.page {
    display: flex; align-items: center; gap: 12px;
    font-size: 1.5rem; font-weight: 700;
    color: var(--ink);
    margin: 0 0 14px;
}
h1.page::before {
    content: "";
    width: 6px; height: 30px; flex: none;
    border-radius: 5px;
    background: linear-gradient(180deg, var(--brand), var(--brand-2));
    box-shadow: 0 0 14px rgba(99, 102, 241, .45);
}
h2 { color: var(--ink); font-weight: 700; }

main a:not(.btn):not(.nav-link):not(.menu-item) {
    color: var(--brand-600);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: border-color .15s, color .15s;
}
main a:not(.btn):not(.nav-link):not(.menu-item):hover { color: var(--brand-700); border-bottom-color: currentColor; }

/* ── Cards / KPI ───────────────────────────────────────────── */
.card {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    padding: 20px 22px;
    box-shadow: var(--sh-sm);
    margin-bottom: 18px;
}
.card h2 { margin-top: 0; font-size: 1.02rem; }

.hero { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 6px; }
.hero-sub { color: var(--muted); margin: -6px 0 16px; font-size: .93rem; }
.hero-actions { display: flex; gap: 10px; flex-wrap: wrap; }

.kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px; margin-bottom: 20px; }
.kpi {
    position: relative;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--r-lg);
    padding: 18px 20px;
    box-shadow: var(--sh-sm);
    overflow: hidden;
    transition: transform .18s ease, box-shadow .18s ease;
}
.kpi:hover { transform: translateY(-3px); box-shadow: var(--sh-md); }
.kpi-top { display: flex; align-items: center; justify-content: space-between; }
.kpi-ico {
    width: 46px; height: 46px; flex: none;
    border-radius: 13px;
    display: grid; place-items: center;
    font-size: 1.3rem;
}
.kpi-ico i.bi { font-size: 1.15rem; color: #fff; }
.kpi-trend { font-size: .8rem; font-weight: 700; padding: 3px 9px; border-radius: 999px; }
.kpi-trend.ok { background: var(--ok-soft); color: var(--ok-deep); }
.kpi-trend.bad { background: var(--danger-soft); color: var(--danger-deep); }
.kpi-label { margin-top: 13px; font-size: .82rem; font-weight: 600; color: var(--muted); }
.kpi-value { font-size: 1.6rem; font-weight: 800; letter-spacing: -.02em; color: var(--ink); font-variant-numeric: tabular-nums; line-height: 1.15; margin-top: 2px; }
.kpi-sub { font-size: .8rem; color: var(--faint); margin-top: 3px; }
.kpi .glow { position: absolute; right: -34px; top: -34px; width: 110px; height: 110px; border-radius: 50%; opacity: .12; filter: blur(6px); }

.g-indigo { background: linear-gradient(135deg, #6366f1, #8b5cf6); box-shadow: 0 6px 16px rgba(99, 102, 241, .35); }
.g-green  { background: linear-gradient(135deg, #10b981, #34d399); box-shadow: 0 6px 16px rgba(16, 185, 129, .32); }
.g-blue   { background: linear-gradient(135deg, #3b82f6, #0ea5e9); box-shadow: 0 6px 16px rgba(59, 130, 246, .32); }
.g-violet { background: linear-gradient(135deg, #8b5cf6, #d946ef); box-shadow: 0 6px 16px rgba(139, 92, 246, .34); }
.g-amber  { background: linear-gradient(135deg, #f59e0b, #fbbf24); box-shadow: 0 6px 16px rgba(245, 158, 11, .34); }
.g-red    { background: linear-gradient(135deg, #ef4444, #f87171); box-shadow: 0 6px 16px rgba(239, 68, 68, .32); }
.g-slate  { background: linear-gradient(135deg, #64748b, #94a3b8); box-shadow: 0 6px 16px rgba(100, 116, 139, .3); }

.chip-row { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 20px; }
.chip {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 8px 16px;
    border-radius: 999px;
    background: var(--brand-soft);
    border: 1px solid #c7d2fe;
    color: var(--brand-700);
    font-weight: 600; font-size: .88rem;
    text-decoration: none;
    transition: .16s;
}
.chip:hover { transform: translateY(-1px); box-shadow: var(--sh-sm); border-color: #a5b4fc; }

/* ── Task cards ────────────────────────────────────────────── */
.task-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(252px, 1fr)); gap: 12px; }
.task {
    display: flex; align-items: center; gap: 14px;
    background: #fff; border: 1px solid var(--line); border-radius: 14px;
    padding: 14px 16px;
    text-decoration: none; color: var(--ink);
    transition: .18s ease;
}
.task:hover { border-color: #c7d2fe; box-shadow: var(--sh-md); transform: translateY(-2px); }
.task-ico {
    width: 42px; height: 42px; flex: none;
    border-radius: 12px;
    display: grid; place-items: center;
    font-size: 1.15rem;
    background: var(--brand-soft);
}
.task-ico i.bi { font-size: 1.05rem; color: var(--brand-700); }
.task-meta { min-width: 0; }
.task-num { font-weight: 800; font-size: 1.08rem; line-height: 1.1; }
.task-lbl { font-size: .8rem; color: var(--muted); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ── Tables ────────────────────────────────────────────────── */
table.grid, table.table, .card table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: .92rem;
}
/* B104: ตาราง class="table" (วางลอยนอก card ตามหน้า content) ได้กรอบ card — theme เดียวทั้งระบบ */
table.table {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 14px;
    box-shadow: var(--sh-sm);
}
.card table.table { background: transparent; border: none; border-radius: 0; box-shadow: none; }
table.grid th, table.table th, .card table th {
    background: #f8fafc;
    color: var(--ink-2);
    font-weight: 600;
    font-size: .82rem;
    text-transform: uppercase;
    text-align: left;
    padding: 10px 14px;
    border-bottom: 1px solid var(--line);
    white-space: nowrap;
}
table.grid td, table.table td, .card table td {
    padding: 11px 14px;
    border-bottom: 1px solid var(--line-soft);
    color: var(--ink-2);
    vertical-align: middle;
}
table.grid tr:last-child td, table.table tr:last-child td, .card table tr:last-child td { border-bottom: none; }
table.grid tbody tr, table.table tbody tr, .card table tbody tr { transition: background .13s; }
table.grid tbody tr:hover, table.table tbody tr:hover, .card table tbody tr:hover { background: var(--brand-soft); }
table.grid tr:first-child th:first-child, table.table tr:first-child th:first-child, .card table tr:first-child th:first-child { border-top-left-radius: 12px; }
table.grid tr:first-child th:last-child, table.table tr:first-child th:last-child, .card table tr:first-child th:last-child { border-top-right-radius: 12px; }

/* ── Buttons ───────────────────────────────────────────────── */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: 9px 18px;
    border: none; border-radius: 11px;
    font: 600 .9rem var(--font);
    color: #fff;
    background: linear-gradient(135deg, var(--brand), var(--brand-2));
    box-shadow: 0 2px 6px rgba(79, 70, 229, .3), 0 6px 18px rgba(79, 70, 229, .16);
    text-decoration: none; cursor: pointer;
    transition: transform .16s ease, box-shadow .16s ease, filter .16s ease;
}
.btn:hover { transform: translateY(-1px); box-shadow: 0 4px 10px rgba(79, 70, 229, .32), 0 10px 24px rgba(79, 70, 229, .22); filter: saturate(1.08); color: #fff; }
.btn:active { transform: translateY(0); }
.btn.ghost { background: transparent; color: var(--ink-2); box-shadow: none; border: 1px solid var(--line); }
.btn.ghost:hover { background: var(--brand-soft); border-color: #c7d2fe; color: var(--brand-700); }
.btn.danger { background: linear-gradient(135deg, #ef4444, #dc2626); box-shadow: 0 2px 6px rgba(239, 68, 68, .3), 0 6px 18px rgba(239, 68, 68, .16); }
.btn.danger:hover { box-shadow: 0 4px 10px rgba(239, 68, 68, .34), 0 10px 24px rgba(239, 68, 68, .2); }
.btn:focus-visible { outline: 3px solid rgba(99, 102, 241, .4); outline-offset: 2px; }

/* ปรับสี inline เดิมจาก views เก่าให้เข้ากับ theme ใหม่ (active filter / neutral / success / danger / accent) */
.btn[style*="#1b3a4b"], .btn[style*="#2c9cdb"] {
    background: linear-gradient(135deg, var(--brand), var(--brand-2)) !important;
    box-shadow: 0 2px 6px rgba(79, 70, 229, .3), 0 6px 18px rgba(79, 70, 229, .16) !important;
}
.btn[style*="#6c757d"] {
    background: #64748b !important;
    box-shadow: 0 2px 6px rgba(100, 116, 139, .25) !important;
}
.btn[style*="#198754"] {
    background: linear-gradient(135deg, #059669, #10b981) !important;
    box-shadow: 0 2px 6px rgba(16, 185, 129, .3) !important;
}
.btn[style*="#dc3545"] {
    background: linear-gradient(135deg, #ef4444, #dc2626) !important;
    box-shadow: 0 2px 6px rgba(239, 68, 68, .3) !important;
}
.btn[style*="#0d6efd"] {
    background: linear-gradient(135deg, #3b82f6, #0ea5e9) !important;
    box-shadow: 0 2px 6px rgba(59, 130, 246, .3) !important;
}

/* ── Toolbar + tool dropdown (B143: ปุ่มหลักขนาดเท่ากัน + รายงานรองรวมเป็นเมนูเดียว) ── */
.po-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.po-filters, .po-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.po-toolbar .btn, .po-toolbar summary.btn { height: 40px; padding-top: 0; padding-bottom: 0; box-sizing: border-box; }
.po-toolbar form input[type="text"] { height: 40px; box-sizing: border-box; }
.tool-menu { position: relative; }
.tool-menu summary { list-style: none; cursor: pointer; }
.tool-menu summary::-webkit-details-marker { display: none; }
.tool-menu summary::marker { content: ""; }
.tool-menu-items {
    position: absolute; right: 0; top: calc(100% + 6px); z-index: 50;
    min-width: 230px; padding: 6px;
    background: var(--card); border: 1px solid var(--line);
    border-radius: 12px; box-shadow: 0 14px 34px rgba(15, 23, 42, .16);
    display: flex; flex-direction: column;
}
.tool-menu-items a {
    display: flex; align-items: center; gap: 8px;
    padding: 9px 12px; border-radius: 8px;
    color: var(--ink-2); font: 600 .88rem var(--font);
    text-decoration: none; white-space: nowrap;
}
.tool-menu-items a:hover { background: var(--brand-soft); color: var(--brand-700); }

/* ── Forms ─────────────────────────────────────────────────── */
input:not([type=checkbox]):not([type=radio]):not([type=hidden]),
select,
textarea {
    padding: 9px 12px;
    border: 1px solid #cbd5e1;
    border-radius: 10px;
    font: inherit;
    color: var(--ink);
    background: #fff;
    transition: border-color .15s, box-shadow .15s;
}
input:not([type=checkbox]):not([type=radio]):not([type=hidden]):focus,
select:focus,
textarea:focus {
    outline: none;
    border-color: var(--brand);
    box-shadow: 0 0 0 3.5px rgba(99, 102, 241, .16);
}
/* ── Searchable select (long lists) — B119: Chromium new picker ignores option CSS ── */
/* ใช้ CSS variables ทั้งหมด → ธีม light/dark/lime เปลี่ยนตามอัตโนมัติ */
.ssel-wrap { position: relative; display: block; width: 100%; }
select.ssel-native { display: none; }
.ssel-input {
    width: 100%; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px;
    background: var(--card); color: var(--ink); font: inherit;
    transition: border-color .15s, box-shadow .15s;
}
.ssel-input:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); }
.ssel-list {
    position: fixed; z-index: 1000; left: 0; top: 0; /* ตำแหน่งจริงคำนวณใน JS (portal ไป body — พ้น overflow:hidden ของการ์ด) */
    max-height: 264px; overflow-y: auto; padding: 4px; margin: 0;
    background: var(--card); border: 1px solid var(--line); border-radius: 10px;
    box-shadow: 0 12px 28px rgba(15, 23, 42, .18);
}
.ssel-item {
    padding: 7px 10px; border-radius: 6px; cursor: pointer; color: var(--ink);
    font-size: .88rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ssel-item:hover, .ssel-item.hover { background: var(--brand-soft); color: var(--ink); }
.ssel-item.sel { background: var(--brand); color: #fff; }
.ssel-empty { padding: 8px 10px; color: var(--muted); font-size: .85rem; }

/* ── Date picker (B124) — native calendar popup ธีมไม่ได้ → สร้างเองผ่าน variables ── */
.dp-wrap { position: relative; display: block; width: 100%; }
input.dp-native { display: none; }
.dp-input {
    width: 100%; padding: 9px 12px; border: 1px solid var(--line); border-radius: 10px;
    background: var(--card); color: var(--ink); font: inherit; cursor: pointer;
    transition: border-color .15s, box-shadow .15s;
}
.dp-input:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); }
.dp-cal {
    position: fixed; z-index: 1000; left: 0; top: 0; width: 292px; padding: 10px;
    background: var(--card); border: 1px solid var(--line); border-radius: 12px;
    box-shadow: 0 12px 28px rgba(15, 23, 42, .18);
}
.dp-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.dp-title { font-weight: 700; color: var(--ink); font-size: .95rem; }
.dp-nav {
    border: none; background: transparent; color: var(--ink-2); font-size: 1.1rem;
    cursor: pointer; width: 28px; height: 28px; border-radius: 8px; line-height: 1;
}
.dp-nav:hover { background: var(--brand-soft); color: var(--ink); }
.dp-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.dp-dow { text-align: center; font-size: .78rem; color: var(--muted); padding: 4px 0; }
.dp-day { text-align: center; padding: 6px 0; border-radius: 8px; cursor: pointer; font-size: .86rem; color: var(--ink); }
.dp-day:hover { background: var(--brand-soft); }
.dp-day.out { color: var(--muted); }
.dp-day.off { color: var(--muted); opacity: .5; cursor: default; }
.dp-day.today { box-shadow: inset 0 0 0 1.5px var(--brand); }
.dp-day.sel { background: var(--brand); color: #fff; font-weight: 700; }
/* ── Month picker (B134) — 4x3 month grid, themed via variables ── */
.dp-mgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px; padding: 2px 0; }
.dp-mon { text-align: center; padding: 9px 0; border-radius: 8px; cursor: pointer; font-size: .85rem; color: var(--ink); }
.dp-mon:hover { background: var(--brand-soft); }
.dp-mon.off { color: var(--muted); opacity: .5; cursor: default; }
.dp-mon.today { box-shadow: inset 0 0 0 1.5px var(--brand); }
.dp-mon.sel { background: var(--brand); color: #fff; font-weight: 700; }
.dp-foot { display: flex; justify-content: space-between; margin-top: 8px; }
.dp-link {
    border: none; background: transparent; color: var(--brand); cursor: pointer;
    font-size: .85rem; font-weight: 600; padding: 4px 6px; border-radius: 6px;
}
.dp-link:hover { background: var(--brand-soft); }
label { font-size: .82rem; font-weight: 600; color: var(--ink-2); }
input[type=checkbox], input[type=radio] { accent-color: var(--brand); }
fieldset { border: 1px solid var(--line); border-radius: var(--r-md); padding: 12px 14px; margin: 0 0 14px; }
fieldset legend { font-weight: 600; font-size: .88rem; color: var(--ink-2); padding: 0 6px; }

/* ── Alerts ────────────────────────────────────────────────── */
.alert {
    display: flex; align-items: flex-start; gap: 10px;
    padding: 12px 16px;
    border-radius: var(--r-md);
    margin-bottom: 16px;
    font-size: .93rem; font-weight: 500;
    border: 1px solid;
}
.alert.success { background: var(--ok-soft); color: var(--ok-deep); border-color: #a7f3d0; }
.alert.error { background: var(--danger-soft); color: var(--danger-deep); border-color: #fecaca; }
.alert.warn { background: #fff7e6; color: #92400e; border-color: #fcd34d; }
.alert::before { font-size: 1rem; line-height: 1.3; }
.alert.success::before { content: "✓"; }
.alert.error::before { content: "✕"; }
.alert.warn::before { content: "⚠"; }

.validation-summary-errors, .field-validation-error { color: var(--danger-deep); font-size: .88rem; }
.validation-summary-errors ul { margin: 4px 0; padding-left: 20px; }

/* ── AI widget ─────────────────────────────────────────────── */
.ai-fab {
    position: fixed; right: 26px; bottom: 26px; z-index: 90;
    width: 60px; height: 60px;
    border: none; border-radius: 50%;
    background: linear-gradient(135deg, var(--brand), var(--brand-2));
    color: #fff; cursor: pointer;
    box-shadow: 0 10px 26px rgba(79, 70, 229, .45), inset 0 1px 0 rgba(255, 255, 255, .3);
    transition: transform .18s, box-shadow .18s;
    animation: aiPulse 2.6s ease-out infinite;
}
.ai-fab-ico { font-size: 1.55rem; display: inline-block; }
.ai-fab:hover { transform: translateY(-3px) scale(1.06); box-shadow: 0 16px 36px rgba(79, 70, 229, .55); }
@keyframes aiPulse {
    0% { box-shadow: 0 10px 26px rgba(79, 70, 229, .45), 0 0 0 0 rgba(99, 102, 241, .45); }
    70% { box-shadow: 0 10px 26px rgba(79, 70, 229, .45), 0 0 0 14px rgba(99, 102, 241, 0); }
    100% { box-shadow: 0 10px 26px rgba(79, 70, 229, .45), 0 0 0 0 rgba(99, 102, 241, 0); }
}
.ai-panel {
    display: none;
    position: fixed; right: 26px; bottom: 100px; z-index: 90;
    width: 460px; max-width: 94vw;
    background: #fff; border: 1px solid var(--line); border-radius: 20px;
    box-shadow: 0 24px 60px rgba(15, 23, 42, .28), 0 2px 8px rgba(15, 23, 42, .1);
    overflow: hidden;
    animation: dropIn .18s ease;
}
.ai-head {
    display: flex; align-items: center; gap: 10px;
    padding: 13px 16px;
    background: linear-gradient(135deg, var(--brand), var(--brand-2));
    color: #fff;
}
.ai-brand { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; }
.ai-avatar {
    width: 40px; height: 40px; border-radius: 12px; flex: none;
    background: rgba(255, 255, 255, .95);
    display: flex; align-items: center; justify-content: center;
    font-size: 1.25rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, .18);
}
.ai-avatar i { color: var(--brand); } /* กันหุ่นขาวบนพื้นขาว (inherit สีหัวเขียว) */
.ai-title { display: flex; flex-direction: column; min-width: 0; }
.ai-title strong { font-size: 1rem; line-height: 1.2; }
.ai-status { display: flex; align-items: center; gap: 5px; font-size: .78rem; opacity: .92; }
.ai-status i {
    width: 7px; height: 7px; border-radius: 50%; background: #4ade80;
    box-shadow: 0 0 0 3px rgba(74, 222, 128, .25);
}
.ai-head .ai-module { font-size: .78rem; opacity: .95; background: rgba(255, 255, 255, .2); padding: 3px 10px; border-radius: 999px; white-space: nowrap; }
.ai-actions { display: flex; gap: 6px; }
.ai-actions button {
    width: 32px; height: 32px; border-radius: 10px; border: none;
    background: rgba(255, 255, 255, .16); color: #fff;
    font-size: .92rem; cursor: pointer; display: flex; align-items: center; justify-content: center;
    transition: background .15s, transform .15s;
}
.ai-actions button:hover { background: rgba(255, 255, 255, .3); transform: translateY(-1px); }
.ai-body { height: 440px; overflow-y: auto; padding: 14px; background: #f8fafc; }
.ai-form { display: flex; gap: 8px; padding: 10px; border-top: 1px solid var(--line); background: #fff; }
.ai-form input {
    flex: 1; border: 1px solid var(--line) !important; border-radius: 999px !important;
    padding: 11px 16px !important; font-size: .95rem;
    box-shadow: none !important; background: #f8fafc;
    transition: border-color .15s, box-shadow .15s;
}
.ai-form input:focus { border-color: var(--brand) !important; box-shadow: 0 0 0 3px rgba(99, 102, 241, .18) !important; background: #fff; }
.ai-form button {
    border: none; cursor: pointer; color: #fff; flex: none;
    width: 42px; height: 42px; border-radius: 999px;
    font-size: 1rem;
    background: linear-gradient(135deg, var(--brand), var(--brand-2));
    box-shadow: 0 4px 12px rgba(79, 70, 229, .35);
    transition: transform .15s, box-shadow .15s;
}
.ai-form button:hover { transform: scale(1.06); box-shadow: 0 6px 16px rgba(79, 70, 229, .45); }
.ai-msg {
    margin: 7px 0; max-width: 88%;
    padding: 10px 14px; border-radius: 14px;
    font-size: .9rem; white-space: pre-wrap; line-height: 1.5;
}
.ai-msg.me { background: linear-gradient(135deg, var(--brand), var(--brand-2)); color: #fff; margin-left: auto; border-bottom-right-radius: 5px; box-shadow: 0 3px 10px rgba(79, 70, 229, .28); }
.ai-msg.bot { background: #fff; border: 1px solid var(--line); border-bottom-left-radius: 5px; box-shadow: 0 1px 4px rgba(15, 23, 42, .06); }
@media (max-width: 640px) {
    .ai-panel { right: 10px; left: 10px; bottom: 88px; width: auto; max-width: none; }
    .ai-fab { right: 18px; bottom: 18px; }
}

/* ── AI: สถานะกำลังคิด (จุดกะพริบ + เฟสหมุน) ── */
.ai-thinking { display: flex; align-items: center; gap: 8px; color: var(--muted); }
.ai-thinking .ai-phase { font-size: .84rem; }
.ai-dots { display: inline-flex; gap: 3px; align-items: center; }
.ai-dots span {
    width: 5px; height: 5px; border-radius: 50%;
    background: #8fb0ff; animation: aiBlink 1s infinite;
}
.ai-dots span:nth-child(2) { animation-delay: .2s; }
.ai-dots span:nth-child(3) { animation-delay: .4s; }
@keyframes aiBlink { 0%, 80%, 100% { opacity: .25; transform: scale(.8); } 40% { opacity: 1; transform: scale(1.05); } }

/* ── AI: การ์ดทัวร์นำเสนอ ── */
.ai-tour-card { border-left: 3px solid var(--brand); background: linear-gradient(135deg, #fdf7ff, #f5f3ff); }
.ai-tour-title { font-weight: 600; color: var(--brand); margin-bottom: 4px; }
html[data-theme="dark"] .ai-tour-card { background: #1e2440; border-left-color: #8fb0ff; }
.ai-tour-card .btn { margin: 0; }

/* ── AI: กราฟ (```svg จาก server) + HTML (```html sanitized) ── */
.md-chart { margin: 8px 0; padding: 8px; background: #fff; border: 1px solid var(--line); border-radius: 10px; }
.md-chart svg { display: block; max-width: 100%; }
.md-html { font-size: .88rem; line-height: 1.5; }
.md-html table { border-collapse: collapse; width: 100%; margin: 6px 0; font-size: .84rem; }
.md-html th, .md-html td { border: 1px solid var(--line); padding: 4px 8px; text-align: left; }
.md-html th { background: #f1f5f9; }
.md-html ul, .md-html ol { padding-left: 20px; margin: 4px 0; }
.md-html a { color: var(--brand); }

/* ── Utilities ─────────────────────────────────────────────── */
.mono { font-family: "SFMono-Regular", Consolas, monospace; font-variant-numeric: tabular-nums; }
.muted { color: var(--muted); }
.right { text-align: right; }

/* ── Responsive ────────────────────────────────────────────── */
@media (max-width: 1080px) {
    .sidebar { transform: translateX(-105%); }
    body.nav-open .sidebar { transform: none; }
    body.nav-open .backdrop { display: block; }
    .shell { margin-left: 0; }
    .top-date { display: none; }
    .content { padding: 20px 16px 56px; }
    .kpi-grid { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
}

/* ---------- Menu search (Ctrl+K) ---------- */
.search-btn {
    display: inline-flex; align-items: center; gap: 8px;
    background: #f4f6fa; border: 1px solid #e3e8f0; border-radius: 10px;
    padding: 7px 12px; color: #52606d; font-size: 13px; cursor: pointer;
}
.search-btn kbd {
    background: #fff; border: 1px solid #d4dbe4; border-radius: 5px;
    padding: 1px 6px; font-size: 11px; font-family: inherit;
}
.search-overlay {
    position: fixed; inset: 0; background: rgba(15, 23, 42, .45);
    z-index: 500; display: flex; align-items: flex-start; justify-content: center;
    padding-top: 12vh;
}
.search-overlay[hidden] { display: none; }
.search-modal {
    width: min(560px, 92vw); background: #fff; border-radius: 14px;
    box-shadow: 0 24px 60px rgba(0,0,0,.25); overflow: hidden;
}

/* ---- Markdown คำตอบ AI (.md — renderer ปลอดภัยใน js/md.js) ---- */
.md { line-height: 1.6; word-break: break-word; }
.md > :first-child { margin-top: 0; }
.md > :last-child { margin-bottom: 0; }
.md h1, .md h2, .md h3, .md h4, .md h5, .md h6 { margin: 10px 0 6px; font-weight: 700; }
.md h1 { font-size: 1.25rem; } .md h2 { font-size: 1.15rem; } .md h3 { font-size: 1.05rem; }
.md h4, .md h5, .md h6 { font-size: 1rem; }
.md p { margin: 4px 0; }
.md ul, .md ol { margin: 4px 0; padding-left: 22px; }
.md li { margin: 2px 0; }
.md code {
    background: rgba(99, 102, 241, .1); color: #4338ca;
    padding: 1px 6px; border-radius: 5px; font-family: Consolas, monospace; font-size: .92em;
}
.md pre {
    background: #0f172a; color: #e2e8f0; border-radius: 8px;
    padding: 10px 12px; overflow-x: auto; margin: 6px 0;
}
.md pre code { background: none; color: inherit; padding: 0; }
.md blockquote {
    margin: 6px 0; padding: 6px 12px; border-left: 3px solid #818cf8;
    background: rgba(129, 140, 248, .08); border-radius: 0 8px 8px 0; color: #475569;
}
.md table { border-collapse: collapse; width: 100%; margin: 6px 0; font-size: .95em; }
.md th, .md td { border: 1px solid #d4dbe4; padding: 5px 9px; text-align: left; vertical-align: top; }
.md th { background: #eef2ff; font-weight: 600; }
.md tr:nth-child(even) td { background: rgba(148, 163, 184, .07); }
.md hr { border: none; border-top: 1px solid #d4dbe4; margin: 8px 0; }
.md a { color: #4f46e5; text-decoration: underline; }
.md a.md-badlink { color: #b91c1c; text-decoration: line-through; }

/* ตารางตัวเลข — จัดขวา + เน้นค่าอันตราย (ใช้กับรายงานการเงิน) */
.ta-r { text-align: right; }
.td-danger { color: #b91c1c; font-weight: 600; }
.search-modal input {
    width: 100%; padding: 16px 18px; font-size: 16px; border: none;
    outline: none; border-bottom: 1px solid #eef0f5;
}
.search-results { max-height: 46vh; overflow-y: auto; padding: 6px; }
.search-item {
    display: block; padding: 10px 14px; border-radius: 8px;
    text-decoration: none; color: #1e293b; font-size: 14px;
}
.search-item.selected, .search-item:hover { background: #eef2ff; color: #4f46e5; }
.search-empty { padding: 14px; color: #94a3b8; font-size: 14px; }
.search-hint { padding: 8px 18px 12px; color: #94a3b8; font-size: 13px; border-top: 1px solid #f4f6fa; }

/* ---------- Getting started checklist ---------- */
.onboard-progress { height: 8px; background: #eef0f5; border-radius: 6px; margin: 12px 0; overflow: hidden; }
.onboard-progress > div { height: 8px; border-radius: 6px; background: linear-gradient(90deg, #6366f1, #22c55e); transition: width .4s; }
.onboard-step { display: flex; align-items: center; gap: 10px; padding: 10px 4px; text-decoration: none; color: inherit; border-bottom: 1px solid #f0f2f6; }
.onboard-step:last-child { border-bottom: none; }
.onboard-step:hover { background: #f8fafc; }
.onboard-step .go { color: #6366f1; white-space: nowrap; }

@media (max-width: 1080px) {
    .search-btn span, .search-btn kbd { display: none; }
}

/* ---------- Tablet / Mobile (หน้างาน) ---------- */
@media (max-width: 900px) {
    .layout { grid-template-columns: 1fr !important; }
    .side-nav { position: static !important; max-height: none !important; border-right: none !important; border-bottom: 1px solid #e5e9ee; }
    main.content { padding: 14px !important; }
    table.grid, table.table { display: block; overflow-x: auto; white-space: nowrap; }
    h1.page { font-size: 1.3rem !important; }
}
@media (max-width: 900px) {
    .topbar { flex-wrap: wrap; gap: 8px; padding: 10px 14px !important; }
    .topbar h1 { font-size: 1rem !important; }
    .topbar .topbar-right { flex-wrap: wrap; }
    .card { padding: 16px !important; }
    form input, form select, form textarea { font-size: 16px !important; } /* กัน iOS zoom */
}

/* ---------- ช่องตัวเลข step="any": ซ่อน spinner (ลูกศร) เพราะกดแล้วไม่ขยับ — พิมพ์ทศนิยมได้อิสระ ---------- */
input[type="number"][step="any"]::-webkit-outer-spin-button,
input[type="number"][step="any"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
input[type="number"][step="any"] {
    -moz-appearance: textfield;
    appearance: textfield;
}

/* ---------- Analytics (BI) pages ---------- */
.an-page-title { font-size: 1.35rem; margin: 0 0 4px; color: #1e293b; }
.an-sub { color: #7c8b9d; font-size: .85rem; margin: 0 0 16px; }
.an-note { font-size: .82rem; color: #7c8b9d; margin-top: 8px; }
.an-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 900px) { .an-grid2 { grid-template-columns: 1fr; } }
.an-scroll { overflow-x: auto; }
.an-badge { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: .78rem; font-weight: 700; }
.an-badge.a { background: #fee2e2; color: #b91c1c; }
.an-badge.b { background: #fef3c7; color: #b45309; }
.an-badge.c { background: #dcfce7; color: #15803d; }
/* ══════════════════════════════════════════════════════════════
   Dark mode (W-11) — html[data-theme="dark"]
   ══════════════════════════════════════════════════════════════ */
html[data-theme="dark"] {
    --bg: #0b1220;
    --ink: #e2e8f0;
    --ink-2: #cbd5e1;
    --muted: #94a3b8;
    --faint: #64748b;
    --line: #28354a;
    --line-soft: #1e293b;
    --card: #131c2e;
    --brand-soft: rgba(99, 102, 241, .14);
    --ok-soft: rgba(16, 185, 129, .12);
    --warn-soft: rgba(245, 158, 11, .12);
    --danger-soft: rgba(239, 68, 68, .12);
    --info-soft: rgba(59, 130, 246, .12);
    --ok-deep: #34d399;
    --warn-deep: #fbbf24;
    --danger-deep: #f87171;
    --info-deep: #60a5fa;
    --brand-700: #a5b4fc;
    --sh-sm: 0 1px 2px rgba(0, 0, 0, .4);
    --sh-md: 0 4px 12px rgba(0, 0, 0, .45);
    --sh-lg: 0 20px 48px rgba(0, 0, 0, .6);
    color-scheme: dark;
}
html[data-theme="dark"] body {
    background:
        radial-gradient(1200px 500px at 85% -10%, rgba(99, 102, 241, .1), transparent 60%),
        radial-gradient(900px 420px at -10% 110%, rgba(139, 92, 246, .08), transparent 55%),
        var(--bg);
}
html[data-theme="dark"] ::-webkit-scrollbar-thumb { background: #334155; background-clip: content-box; }
html[data-theme="dark"] .topbar { background: #0f1728; border-bottom-color: #1e293b; }
html[data-theme="dark"] .top-title { color: #e2e8f0; }
html[data-theme="dark"] .card,
html[data-theme="dark"] .task,
html[data-theme="dark"] .ai-panel,
html[data-theme="dark"] .search-modal,
html[data-theme="dark"] .kb-card { background: var(--card); border-color: var(--line); color: var(--ink); }
html[data-theme="dark"] .hero,
html[data-theme="dark"] .kpi { background: var(--card); border-color: var(--line); }
html[data-theme="dark"] table.grid th,
html[data-theme="dark"] table.table th,
html[data-theme="dark"] .card table th { background: #1a2740; color: #cbd5e1; }
html[data-theme="dark"] table.table { background: var(--card); border-color: var(--line); }
html[data-theme="dark"] .card table.table { background: transparent; border: none; }
html[data-theme="dark"] table.grid td,
html[data-theme="dark"] table.table td,
html[data-theme="dark"] .card table td { color: var(--ink-2); }
html[data-theme="dark"] table.grid tbody tr:hover,
html[data-theme="dark"] table.table tbody tr:hover,
html[data-theme="dark"] .card table tbody tr:hover { background: rgba(99, 102, 241, .1); }
html[data-theme="dark"] input:not([type=checkbox]):not([type=radio]):not([type=hidden]),
html[data-theme="dark"] select,
html[data-theme="dark"] textarea {
    background: #0f1728; color: var(--ink); border-color: #334155;
}
html[data-theme="dark"] select option { background: #0f1728; color: #cbd5e1; }
html[data-theme="dark"] select option:hover { background: #1e293b; color: #e2e8f0; }
html[data-theme="dark"] select option:checked { background: #312e81; color: #e0e7ff; }
html[data-theme="dark"] .btn.ghost { color: var(--ink-2); }
html[data-theme="dark"] .search-btn { background: #131c2e; border-color: #28354a; color: #cbd5e1; }
html[data-theme="dark"] .search-btn kbd { background: #1e293b; border-color: #334155; }
html[data-theme="dark"] .search-modal input { background: var(--card); color: var(--ink); border-bottom-color: #1e293b; }
html[data-theme="dark"] .search-item { color: #cbd5e1; }
html[data-theme="dark"] .search-item.selected,
html[data-theme="dark"] .search-item:hover { background: #1e2b45; color: #a5b4fc; }
html[data-theme="dark"] .search-hint,
html[data-theme="dark"] .search-empty { color: #64748b; }
html[data-theme="dark"] .kb-col { background: #101a2c; }
html[data-theme="dark"] .kb-btn { background: var(--card); border-color: #334155; color: #cbd5e1; }
html[data-theme="dark"] .ai-body { background: #0f1728; }
html[data-theme="dark"] .ai-form { background: #131c2e; }
html[data-theme="dark"] .ai-form input { background: #0f1728; border-color: #28354a; color: var(--ink); }
html[data-theme="dark"] .ai-msg.bot { background: #1a2740; border-color: #28354a; color: #e2e8f0; }
html[data-theme="dark"] .onboard-step { border-bottom-color: #1e293b; }
html[data-theme="dark"] .md code { background: rgba(129, 140, 248, .16); color: #c7d2fe; }
html[data-theme="dark"] .md th { background: #1a2740; }
html[data-theme="dark"] .md th,
html[data-theme="dark"] .md td { border-color: #334155; }
html[data-theme="dark"] .md blockquote { background: rgba(129, 140, 248, .08); color: #cbd5e1; }
html[data-theme="dark"] .md tr:nth-child(even) td { background: rgba(148, 163, 184, .06); }

/* ปุ่มวิธีคำนวณ (ℹ) ท้าย dashboard — แสดง knowledge article แบบ plain text */
.method-note{margin:14px 0;border:1px dashed #c9d4dc;border-radius:10px;background:#fbfcfe;padding:10px 14px;font-size:.85rem;color:#33475b}
.method-note summary{cursor:pointer;font-weight:600;color:#0E8F8B;display:flex;align-items:center;gap:6px;list-style:none}
.method-note summary::-webkit-details-marker{display:none}
.method-note .method-body{margin-top:10px;white-space:pre-wrap;line-height:1.65;color:#33475b;max-height:440px;overflow:auto;border-top:1px solid #eef2f6;padding-top:10px}
html[data-theme="dark"] .method-note{background:#0f172a;border-color:#334155;color:#cbd5e1}
html[data-theme="dark"] .method-note .method-body{color:#cbd5e1;border-color:#334155}

/* ══════════════════════════════════════════════════════════════
   Nature theme (v1.1.33) — html[data-theme="lime"]
   ธีมเขียวธรรมชาติตาม Look&feel ลูกค้า: เขียวป่า #052F28 · ไลม์ #99EE70
   · เทา #767676 · sidebar ขาว · การ์ดขาวบนพื้นเทาอ่อน
   ══════════════════════════════════════════════════════════════ */
html[data-theme="lime"] {
    --brand: #052F28;            /* เขียวป่าเข้ม — ปุ่ม/ลิงก์ */
    --brand-2: #0b6e57;
    --brand-600: #03231e;
    --brand-700: #021a16;
    --brand-soft: #eaf7e8;
    --ink: #052F28;
    --ink-2: #25453d;
    --muted: #767676;
    --line: #dde5dd;
    --line-soft: #eef3ea;
    --bg: #f1f4ee;
    --card: #ffffff;
    --ok: #4cb944; --ok-deep: #2f7d2c; --ok-soft: #eaf7e8;
    /* กราฟวงแหวน (donut) — ชุดเขียวตามธีม · base คงสีเดิม */
    --donut-1: #052F28;
    --donut-2: #3b8f6b;
    --donut-3: #99EE70;
    --donut-4: #0b6e57;
    --donut-5: #c05a4f;
    --donut-6: #7bb89a;
    --donut-teal: #7bb89a;
}

html[data-theme="lime"] body {
    background:
        radial-gradient(1200px 500px at 85% -10%, rgba(153, 238, 112, .12), transparent 60%),
        radial-gradient(900px 420px at -10% 110%, rgba(5, 47, 40, .06), transparent 55%),
        var(--bg);
}

/* sidebar ขาว + ตัวหนังสือเขียวป่า/เทา (ตาม mockup) */
html[data-theme="lime"] .sidebar {
    color: #767676;
    background:
        radial-gradient(420px 240px at 20% -5%, rgba(153, 238, 112, .18), transparent 60%),
        radial-gradient(380px 300px at 110% 105%, rgba(5, 47, 40, .05), transparent 55%),
        linear-gradient(180deg, #ffffff 0%, #f6faf3 100%);
    box-shadow: 8px 0 32px rgba(5, 47, 40, .14);
}
html[data-theme="lime"] .side-nav::-webkit-scrollbar-thumb { background: rgba(5, 47, 40, .18); }
html[data-theme="lime"] .brand-text strong { color: #052F28; }
html[data-theme="lime"] .brand-text small { color: #0b6e57; }
html[data-theme="lime"] .side-foot .side-foot-info strong { color: #052F28; }
html[data-theme="lime"] .side-foot .side-foot-info small { color: #767676; }
html[data-theme="lime"] .side-foot .avatar {
    background: linear-gradient(135deg, #0b6e57, #052F28);
    box-shadow: 0 4px 12px rgba(11, 110, 87, .35);
}
html[data-theme="lime"] .nav-section span {
    background: linear-gradient(90deg, #0b6e57, #6cc94a);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
}
html[data-theme="lime"] .nav-group-head:hover { color: #0b6e57; }
html[data-theme="lime"] .nav-link { color: #25453d; }
html[data-theme="lime"] .nav-link:hover { background: rgba(153, 238, 112, .16); color: #052F28; }
html[data-theme="lime"] .nav-link.active { background: rgba(153, 238, 112, .28); color: #052F28; }
html[data-theme="lime"] .nav-link.active::before {
    background: linear-gradient(180deg, #99EE70, #0b6e57);
    box-shadow: 0 0 10px rgba(153, 238, 112, .9);
}

/* topbar ขาวแก้ว + เนื้อหาสีเขียวป่า */
html[data-theme="lime"] .topbar { background: rgba(255, 255, 255, .88) !important; border-bottom-color: var(--line); }
html[data-theme="lime"] .top-title { color: #052F28; }
html[data-theme="lime"] .kpi .kpi-num {
    background: linear-gradient(90deg, #052F28, #0b6e57);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
}
html[data-theme="lime"] .kpi:hover, html[data-theme="lime"] .task:hover {
    box-shadow: 0 14px 30px rgba(5, 47, 40, .16), 0 3px 8px rgba(15, 23, 42, .07);
}

/* ปุ่ม primary เขียวป่า */
html[data-theme="lime"] .btn.primary {
    background: linear-gradient(135deg, #052F28, #0b6e57);
    color: #fff; border: none;
    box-shadow: 0 6px 16px rgba(5, 47, 40, .3), inset 0 1px 0 rgba(255, 255, 255, .16);
}
html[data-theme="lime"] .btn.primary:hover {
    background: linear-gradient(135deg, #0b6e57, #052F28);
    box-shadow: 0 10px 22px rgba(5, 47, 40, .38);
}
html[data-theme="lime"] .btn.ghost:hover { background: var(--brand-soft); }

/* ตาราง: หัวเขียวอ่อน (พื้นไลม์-เขียวจาง) ตัวอักษรเขียวป่า — ต้องพื้นอ่อนเสมอ
   เพราะตารางเฉพาะทาง (PM/Gantt: .dom, .day-head) วางตัวหนังสือสีเข้มไว้บนหัวเอง */
html[data-theme="lime"] table.grid th,
html[data-theme="lime"] table.table th,
html[data-theme="lime"] .card table th {
    background: linear-gradient(180deg, #e3efe0, #d3e7cb);
    color: #052F28;
}
html[data-theme="lime"] table.grid tbody tr:hover,
html[data-theme="lime"] table.table tbody tr:hover,
html[data-theme="lime"] .card table tbody tr:hover { background: rgba(153, 238, 112, .15); }

/* input focus ไลม์-เขียว */
html[data-theme="lime"] input:not([type=checkbox]):not([type=radio]):not([type=hidden]):focus,
html[data-theme="lime"] select:focus,
html[data-theme="lime"] textarea:focus {
    border-color: #0b6e57 !important;
    box-shadow: 0 0 0 3px rgba(153, 238, 112, .35) !important;
}
/* dropdown popup (native option) เขียวตามธีม — Chromium รองรับ pseudo บน option */
html[data-theme="lime"] select option { background: #fff; color: #14322a; }
html[data-theme="lime"] select option:hover { background: #d3e7cb; color: #052F28; }
html[data-theme="lime"] select option:checked { background: #0b6e57; color: #eaf7e8; }
html[data-theme="lime"] .search-btn:hover { border-color: #0b6e57; box-shadow: 0 0 0 3px rgba(153, 238, 112, .3); }

/* AI/modal/ความรู้ ไล่เฉดเขียว */
html[data-theme="lime"] .ai-panel,
html[data-theme="lime"] .search-modal,
html[data-theme="lime"] .kb-card { background: var(--card); border-color: var(--line); }
html[data-theme="lime"] .ai-msg.bot { background: #eaf7e8; border-color: #cde7c8; color: var(--ink); }
html[data-theme="lime"] .md th { background: #0b5a48; color: #eaf7e8; }
html[data-theme="lime"] .md blockquote { background: rgba(153, 238, 112, .14); color: var(--ink-2); }
html[data-theme="lime"] .method-note{background:#f6faf3;border-color:#cde7c8;color:var(--ink-2)}
html[data-theme="lime"] .method-note .method-body{color:var(--ink-2);border-color:#e3efe0}

/* ไอคอน KPI (.g-*) ปรับชุดเขียวเฉพาะธีม Nature */
html[data-theme="lime"] .g-indigo { background: linear-gradient(135deg, #052F28, #0b6e57); box-shadow: 0 6px 16px rgba(5, 47, 40, .35); }
html[data-theme="lime"] .g-green  { background: linear-gradient(135deg, #0b6e57, #3b8f6b); box-shadow: 0 6px 16px rgba(11, 110, 87, .32); }
html[data-theme="lime"] .g-blue   { background: linear-gradient(135deg, #0b6e57, #7bb89a); box-shadow: 0 6px 16px rgba(11, 110, 87, .32); }
html[data-theme="lime"] .g-amber  { background: linear-gradient(135deg, #99EE70, #6cc94a); box-shadow: 0 6px 16px rgba(153, 238, 112, .42); }
html[data-theme="lime"] .g-amber i.bi { color: #052F28; }
html[data-theme="lime"] .g-red    { background: linear-gradient(135deg, #b3261e, #d15b4f); box-shadow: 0 6px 16px rgba(179, 38, 30, .32); }

/* กราฟ (SVG AnalyticsSvg) — จับคู่สีชุดเดิมเป็นโทนเขียวเฉพาะธีม Nature
   (SVG ใช้ presentation attribute stroke/fill — กฎ CSS ของ author ชนะเสมอ) */
html[data-theme="lime"] svg [stroke="#1d4569"] { stroke: #052F28; }
html[data-theme="lime"] svg [stroke="#198754"] { stroke: #0b6e57; }
html[data-theme="lime"] svg [stroke="#e8a13c"] { stroke: #99EE70; }
html[data-theme="lime"] svg [stroke="#6f42c1"] { stroke: #3b8f6b; }
html[data-theme="lime"] svg [stroke="#0d6efd"] { stroke: #7bb89a; }
html[data-theme="lime"] svg [stroke="#b02a37"] { stroke: #c05a4f; }
html[data-theme="lime"] svg [stroke="#e3e9f0"] { stroke: #dde5dd; }
html[data-theme="lime"] svg [fill="#1d4569"] { fill: #052F28; }
html[data-theme="lime"] svg [fill="#198754"] { fill: #0b6e57; }
html[data-theme="lime"] svg [fill="#e8a13c"] { fill: #99EE70; }
html[data-theme="lime"] svg [fill="#6f42c1"] { fill: #3b8f6b; }
html[data-theme="lime"] svg [fill="#0d6efd"] { fill: #7bb89a; }
html[data-theme="lime"] svg [fill="#b02a37"] { fill: #c05a4f; }
html[data-theme="lime"] svg text[fill="#7c8b9d"] { fill: #767676; }

/* ปุ่ม (v1.1.33 ต่อยอด): เงา/โฟกัสเป็นเขียว + ปุ่มสี inline เดิมจาก views เก่าจับคู่ชุดเขียว
   (base .btn ใช้ var(--brand) อยู่แล้ว — เหลือเงา indigo + ปุ่ม inline สีตายตัว) */
html[data-theme="lime"] .btn { box-shadow: 0 2px 6px rgba(5, 47, 40, .3), 0 6px 18px rgba(5, 47, 40, .16); }
html[data-theme="lime"] .btn:hover { box-shadow: 0 4px 10px rgba(5, 47, 40, .32), 0 10px 24px rgba(5, 47, 40, .22); }
html[data-theme="lime"] .btn:focus-visible { outline: 3px solid rgba(153, 238, 112, .5); }
html[data-theme="lime"] .btn[style*="#1b3a4b"],
html[data-theme="lime"] .btn[style*="#2c9cdb"],
html[data-theme="lime"] .btn[style*="#6366f1"],
html[data-theme="lime"] .btn[style*="#0d6efd"] {
    background: linear-gradient(135deg, #052F28, #0b6e57) !important;
    box-shadow: 0 2px 6px rgba(5, 47, 40, .3) !important;
}
html[data-theme="lime"] .btn[style*="#6c757d"] {
    background: linear-gradient(135deg, #3b8f6b, #4f7d6d) !important;
    box-shadow: 0 2px 6px rgba(59, 143, 107, .28) !important;
}
html[data-theme="lime"] .btn[style*="#198754"],
html[data-theme="lime"] .btn[style*="#1e7e45"] {
    background: linear-gradient(135deg, #0b6e57, #3b8f6b) !important;
    box-shadow: 0 2px 6px rgba(11, 110, 87, .3) !important;
}
html[data-theme="lime"] .btn[style*="#dc3545"] {
    background: linear-gradient(135deg, #b3261e, #d15b4f) !important;
    box-shadow: 0 2px 6px rgba(179, 38, 30, .3) !important;
}
/* legend สีกราฟฝั่ง HTML (span สี่เหลี่ยมสี) ให้เข้าชุด */
html[data-theme="lime"] span[style*="background:#1d4569"] { background: #052F28 !important; }
html[data-theme="lime"] span[style*="background:#198754"] { background: #0b6e57 !important; }
html[data-theme="lime"] span[style*="background:#b02a37"] { background: #c05a4f !important; }
html[data-theme="lime"] span[style*="background:#e8a13c"] { background: #99EE70 !important; }

/* v1.1.33 รอบ 3: จุดสีส้ม/เหลือง/เทาที่เหลือ — warn box, ปุ่ม amber, ghost, ห่วงโซ่อนุมัติ */
html[data-theme="lime"] {
    --warn: #5f8f3d;
    --warn-deep: #4d7c2a;
    --warn-soft: #f2fbe9;
}
html[data-theme="lime"] .btn[style*="#b45309"] {
    background: linear-gradient(135deg, #6cc94a, #99EE70) !important;
    color: #052F28 !important;
    box-shadow: 0 2px 6px rgba(153, 238, 112, .4) !important;
}
html[data-theme="lime"] div[style*="border:1px solid #fde68a"] { border-color: #b7e39b !important; }
html[data-theme="lime"] .btn.ghost { border-color: #0b6e57; color: #052F28; }
html[data-theme="lime"] .btn.ghost:hover { background: var(--brand-soft); border-color: #0b6e57; color: #052F28; }
html[data-theme="lime"] [style*="background:#f59e0b"] { background: #99EE70 !important; color: #052F28 !important; }
html[data-theme="lime"] [style*="background:#94a3b8"] { background: #7bb89a !important; }
html[data-theme="lime"] [style*="background:#22c55e"] { background: #0b6e57 !important; }
html[data-theme="lime"] [style*="border-left:4px solid #f59e0b"] { border-left-color: #99EE70 !important; }

/* v1.1.33 B113: sweep สี inline ทั้ง solution (64 สี · 1,553 จุด) — override ครบชุดเขียว */
html[data-theme="lime"] [style*="#c9d4dc"] { border-color: #b9ccb2 !important; }
html[data-theme="lime"] [style*="#b9770e"],
html[data-theme="lime"] [style*="#d97706"],
html[data-theme="lime"] [style*="#ff9800"] {
    background: #99EE70 !important;
    color: #052F28 !important;
}
html[data-theme="lime"] [style*="#8e44ad"],
html[data-theme="lime"] [style*="#1f618d"],
html[data-theme="lime"] [style*="#4f46e5"] {
    background: linear-gradient(135deg, #052F28, #0b6e57) !important;
    color: #fff !important;
}
html[data-theme="lime"] [style*="#0ea5e9"] { background: #7bb89a !important; color: #052F28 !important; }
html[data-theme="lime"] [style*="#fde68a"],
html[data-theme="lime"] [style*="#f0d49a"],
html[data-theme="lime"] [style*="#f1d9b0"],
html[data-theme="lime"] [style*="#fcd34d"] { border-color: #b7e39b !important; }
html[data-theme="lime"] [style*="#fef3c7"] { background: #f2fbe9 !important; }
html[data-theme="lime"] [style*="#92400e"] { color: #4d7c2a !important; }
html[data-theme="lime"] [style*="background:#e8a13c"] { background: #99EE70 !important; }
html[data-theme="lime"] [style*="color:#818cf8"] { color: #0b6e57 !important; }
html[data-theme="lime"] [style*="#c7d2fe"] { border-color: #b7e39b !important; }
html[data-theme="lime"] [style*="#1a7f37"],
html[data-theme="lime"] [style*="#16a34a"] { border-color: #3b8f6b !important; color: #0b6e57 !important; }
html[data-theme="lime"] [style*="#93c5fd"] { color: #7bb89a !important; }
html[data-theme="lime"] [style*="#4ade80"] { color: #0b6e57 !important; }
html[data-theme="lime"] [style*="#facc15"] { color: #6cc94a !important; }
html[data-theme="lime"] [style*="border-left:4px solid #8b5cf6"],
html[data-theme="lime"] [style*="border-left:4px solid #6366f1"] { border-left-color: #99EE70 !important; }
html[data-theme="lime"] [style*="#4d90fe"] { border-color: #99EE70 !important; }
html[data-theme="lime"] [style*="#d8e0e8"],
html[data-theme="lime"] [style*="#dbe2ea"],
html[data-theme="lime"] [style*="#dee2e6"],
html[data-theme="lime"] [style*="#e2e8f0"],
html[data-theme="lime"] [style*="#e3eaf0"],
html[data-theme="lime"] [style*="#e5e9ee"],
html[data-theme="lime"] [style*="#eef0f5"] { border-color: #dde5dd !important; }
html[data-theme="lime"] [style*="#e3ecf4"] { border-color: #dde5dd !important; }
html[data-theme="lime"] [style*="#bcd6f0"] { border-color: #b7d9c6 !important; }

/* ══════════════════════════════════════════════════════════════
   v1.0.82 — Global UI Upgrade (World-class look & feel)
   หมวดเมนู · sidebar polish · cards · buttons · tables · login · motion
   ══════════════════════════════════════════════════════════════ */

/* ── หัวหมวดเมนู (nav-section) ── */
.nav-section {
    display: flex; align-items: center; gap: 10px;
    margin: 18px 10px 6px;
}
.nav-section span {
    font: 700 .78rem/1.25 var(--font);
    color: #8b9cc0;
    background: linear-gradient(90deg, #a5b4fc, #c4b5fd);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
}
.nav-section::after {
    content: ''; flex: 1; height: 1px;
    background: linear-gradient(90deg, rgba(139, 156, 192, .25), transparent);
}
.nav-section:first-of-type { margin-top: 8px; }

/* ── กลุ่มเมนู: หัวกลุ่มเด่นขึ้น + ไอคอนลูกศรหมุนนุ่ม ── */
.nav-group-head { padding: 9px 10px 7px; border-radius: 9px; transition: background .15s; }
.nav-group-head:hover { background: rgba(255, 255, 255, .05); color: #a5b4fc; }
.nav-group-head .chev { transition: transform .22s cubic-bezier(.4, 0, .2, 1); }
.nav-link { transition: background .16s, color .16s, transform .16s, padding-left .16s; }
.nav-link:hover { transform: translateX(3px); }
.nav-link.active::before {
    content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
    width: 3px; height: 60%; border-radius: 3px;
    background: linear-gradient(180deg, #818cf8, #c084fc);
    box-shadow: 0 0 10px rgba(129, 140, 248, .8);
}
.nav-link.active { position: relative; }

/* ── Topbar: glass + เงาเบา ── */
.topbar {
    position: sticky; top: 0; z-index: 40;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    background: rgba(255, 255, 255, .82) !important;
}
html[data-theme="dark"] .topbar { background: rgba(15, 23, 42, .82) !important; }

/* ── การ์ด: เงาละเอียด + เข้าฉากนุ่ม ── */
.card {
    border-radius: var(--r-lg);
    box-shadow: var(--sh-sm);
    transition: box-shadow .2s ease, transform .2s ease;
    animation: fadeUp .35s ease both;
}
@keyframes fadeUp {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: none; }
}
main .card:nth-child(2) { animation-delay: .04s; }
main .card:nth-child(3) { animation-delay: .08s; }
main .card:nth-child(4) { animation-delay: .12s; }
main .card:nth-child(5) { animation-delay: .16s; }

/* การ์ดที่คลิกได้ (KPI/งานด่วน/ลิงก์) — ยก + เงาสี */
.kpi, .task {
    transition: transform .18s ease, box-shadow .18s ease;
}
.kpi:hover, .task:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 30px rgba(79, 70, 229, .16), 0 3px 8px rgba(15, 23, 42, .07);
}
.kpi .kpi-num {
    background: linear-gradient(90deg, var(--brand), var(--brand-2));
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* ── ปุ่ม: gradient + press ── */
.btn {
    border-radius: 10px;
    font-weight: 600;
    transition: transform .15s ease, box-shadow .15s ease, background .15s;
}
.btn:active { transform: scale(.96); }
.btn.primary {
    background: linear-gradient(135deg, var(--brand), var(--brand-2));
    color: #fff; border: none;
    box-shadow: 0 6px 16px rgba(79, 70, 229, .32), inset 0 1px 0 rgba(255, 255, 255, .2);
}
.btn.primary:hover { background: linear-gradient(135deg, var(--brand-600), var(--brand-2)); transform: translateY(-1px); box-shadow: 0 10px 22px rgba(79, 70, 229, .4); }
.btn.danger { box-shadow: 0 6px 16px rgba(239, 68, 68, .25); }
.btn.ghost:hover { background: var(--brand-soft); }

/* ── ตาราง: หัว gradient อ่อน + แถว hover ── */
table.grid th, table.table th, .card table th {
    background: linear-gradient(180deg, #eef2ff, #e0e7ff);
    color: var(--brand-700);
}
html[data-theme="dark"] table.grid th, html[data-theme="dark"] table.table th, html[data-theme="dark"] .card table th {
    background: linear-gradient(180deg, #1e2b45, #1a2740);
    color: #c7d2fe;
}
table.grid tbody tr, table.table tbody tr { transition: background .12s ease; }

/* ── badge: กลมขึ้น + เงาเบา ── */
.badge { border-radius: 999px; font-weight: 600; padding: 3px 11px; }

/* ── alert: เข้าฉาก + ไอคอนชัด ── */
.alert { border-radius: var(--r-md); box-shadow: var(--sh-sm); animation: fadeUp .3s ease both; }

/* ── หน้า login: การ์ดใหญ่ + เงาลึก ── */
.auth-card, .login-card {
    border-radius: 22px;
    box-shadow: 0 30px 80px rgba(15, 23, 42, .22), 0 4px 16px rgba(15, 23, 42, .08);
}

/* ── ช่อง input focus เรืองแสง ── */
input:not([type=checkbox]):not([type=radio]):not([type=hidden]):focus,
select:focus, textarea:focus {
    border-color: var(--brand) !important;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, .14) !important;
}

/* ── ปุ่มค้นหาเมนู: เรืองแสง ── */
.search-btn { border-radius: 999px; transition: all .18s ease; }
.search-btn:hover { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(99, 102, 241, .14); }

/* ── เคลื่อนไหวหน้าเข้าฉาก ── */
/* ---------- ธีม Nature: ครอบสีใน <style> block ของ views (B116 — guard check_lime_theme สแกนจุดนี้) ---------- */
html[data-theme="lime"] table.pm .bar { background:#0b6e57; color:#eaf7e8; } /* covers #e6a817 */
html[data-theme="lime"] table.pm td.cell.drop-hint { outline-color:#0b6e57; }
html[data-theme="lime"] table.gantt .bar { background:#0b6e57 !important; color:#eaf7e8 !important; } /* covers #2c9cdb #198754 */
html[data-theme="lime"] table.gantt td.cell.drop-hint { outline-color:#0b6e57; }
html[data-theme="lime"] .ap-node { border-color:#b9ccb2; border-left-color:#0b6e57; } /* covers #6366f1 */
html[data-theme="lime"] .ap-node.drag-over { border-color:#0b6e57; }
html[data-theme="lime"] .md-alert { border-color:#d3e7cb; } /* covers #f1e3c2 */
html[data-theme="lime"] .md-short:hover { border-color:#0b6e57; } /* covers #0e8f8b */
html[data-theme="lime"] .doc .header { border-bottom-color:#052F28; } /* covers #1b3a4b */
main { animation: mainIn .3s ease both; }
@keyframes mainIn { from { opacity: .4; } to { opacity: 1; } }

/* ══════════════════════════════════════════════════════════════
   Liquid Glass themes (v1.1.39) — html[data-theme="glass"|"blue"|"red"]
   ธีมที่ 4/5/6 (CR-20260915-42): glassmorphism — ผิวโปร่ง blur · พื้นหลัง
   gradient อุ่น + blob ลอย · มุมโค้งใหญ่ · sidebar สว่างโปร่ง
   สถาปัตยกรรม: ชั้นโครงสร้างร่วม 1 ชุด (ค่าสีผ่าน var --gl-*) +
   ชุดสี 3 บล็อก (glass=ครีม/amber · blue=ฟ้า teal · red=แดงส้ม)
   ══════════════════════════════════════════════════════════════ */

/* ---------- ชุดสีต่อธีม ---------- */
html[data-theme="glass"] {
    --brand: #e2953c; --brand-2: #d97f2e; --brand-600: #9a5c1f; --brand-700: #7c4a16; --brand-soft: #fbeee0;
    --ink: #2b2118; --ink-2: #4a3d30; --muted: #7a6a58; --faint: #a8957e;
    --line: #e8ddcf; --line-soft: #f4ecdf; --bg: #f7ecdd; --card: #ffffff;
    --ok: #7d9a5e; --ok-deep: #5c7a42; --ok-soft: #f1f6e9;
    --warn: #e2953c; --warn-deep: #9a5c1f; --warn-soft: #fdf1e2;
    --danger: #c05a4f; --danger-deep: #8f3a30; --danger-soft: #faece9;
    --info: #b96a24; --info-deep: #8f4e1a; --info-soft: #fbeee0;
    --donut-1: #e2953c; --donut-2: #d97f2e; --donut-3: #c8742f; --donut-4: #3a2b1e; --donut-5: #b02a37; --donut-6: #b09772; --donut-teal: #7d9a5e;
    --gl-g1: rgba(255,176,108,.5); --gl-g2: rgba(226,160,100,.38); --gl-g3: rgba(214,168,130,.42);
    --gl-blob1: rgba(255,190,133,.55); --gl-blob2: rgba(240,169,148,.45);
    --gl-card: rgba(255,255,255,.52); --gl-card-2: rgba(255,255,255,.32);
    --gl-border: rgba(255,255,255,.72);
    --gl-side1: rgba(255,255,255,.62); --gl-side2: rgba(255,255,255,.36);
    --gl-hover: rgba(255,255,255,.55);
    --gl-active: #2b2118; --gl-active-ink: #ffffff;
    --gl-th: #f3e7d6; --gl-th-ink: #2b2118;
    --gl-btn1: #2b2118; --gl-btn2: #3a2b1e; --gl-btn-mid1: #8a8170; --gl-btn-mid2: #6d6654;
    --gl-btn-ok1: #7d9a5e; --gl-btn-ok2: #5f7c44; --gl-btn-danger1: #b3261e; --gl-btn-danger2: #d15b4f;
    --gl-btn-amber: #e2953c; --gl-btn-amber2: #c8742f;
    --gl-nav-a: #c8742f; --gl-nav-b: #e0a05c;
    --gl-avatar1: #e2953c; --gl-avatar2: #b96a24;
    --gl-svg-navy: #2b2118; --gl-svg-green: #a97c52; --gl-svg-amber: #e2953c; --gl-svg-purple: #b96a24; --gl-svg-blue: #c99668; --gl-svg-red: #c05a4f; --gl-svg-grid: #e8ddcf; --gl-svg-axis: #7a6a58;
    --gl-g-indigo1: #2b2118; --gl-g-indigo2: #4a3d30; --gl-g-green1: #7d9a5e; --gl-g-green2: #5c7a42;
    --gl-g-blue1: #c99668; --gl-g-blue2: #a97c52; --gl-g-amber1: #e2953c; --gl-g-amber2: #f0b874; --gl-g-amber-ink: #3a2410;
    --gl-g-red1: #b3261e; --gl-g-red2: #d15b4f;
    --gl-md-th: #2b2118; --gl-md-th-ink: #f6efdf; --gl-ai-bot: #f7ecdd; --gl-ai-bot-line: #e8ddcf;
    --gl-method: #fbf5ea; --gl-method-line: #e8ddcf;
    --gl-amber-bg: #f0c98c; --gl-amber-ink: #3a2410;
    --gl-softline: #e8ddcf; --gl-softline2: #e2d6c2;
}
html[data-theme="blue"] {
    --brand: #2f8fae; --brand-2: #28809b; --brand-600: #165f78; --brand-700: #10495c; --brand-soft: #e3f3f8;
    --ink: #122836; --ink-2: #335467; --muted: #5b717e; --faint: #8ba1ae;
    --line: #d8e9ef; --line-soft: #eaf4f8; --bg: #e9f4f8; --card: #ffffff;
    --ok: #4c9d7c; --ok-deep: #3a8063; --ok-soft: #eaf6ef;
    --warn: #e2953c; --warn-deep: #9a5c1f; --warn-soft: #fdf1e2;
    --danger: #c05a4f; --danger-deep: #8f3a30; --danger-soft: #faece9;
    --info: #1f7d9c; --info-deep: #165f78; --info-soft: #e3f3f8;
    --donut-1: #2f8fae; --donut-2: #4fa6c0; --donut-3: #176a86; --donut-4: #163241; --donut-5: #c05a4f; --donut-6: #7f9fad; --donut-teal: #4c9d7c;
    --gl-g1: rgba(127,212,232,.5); --gl-g2: rgba(91,184,214,.38); --gl-g3: rgba(159,216,234,.42);
    --gl-blob1: rgba(143,216,236,.55); --gl-blob2: rgba(159,220,238,.45);
    --gl-card: rgba(255,255,255,.52); --gl-card-2: rgba(255,255,255,.32);
    --gl-border: rgba(255,255,255,.72);
    --gl-side1: rgba(255,255,255,.64); --gl-side2: rgba(255,255,255,.38);
    --gl-hover: rgba(255,255,255,.55);
    --gl-active: #163241; --gl-active-ink: #ffffff;
    --gl-th: #dceef4; --gl-th-ink: #122836;
    --gl-btn1: #163241; --gl-btn2: #1e4153; --gl-btn-mid1: #5b7d8c; --gl-btn-mid2: #456272;
    --gl-btn-ok1: #4c9d7c; --gl-btn-ok2: #3a8063; --gl-btn-danger1: #b3261e; --gl-btn-danger2: #d15b4f;
    --gl-btn-amber: #e2953c; --gl-btn-amber2: #c8742f;
    --gl-nav-a: #2f8fae; --gl-nav-b: #7fc8dd;
    --gl-avatar1: #2f8fae; --gl-avatar2: #1f7d9c;
    --gl-svg-navy: #163241; --gl-svg-green: #4f8ba3; --gl-svg-amber: #2f8fae; --gl-svg-purple: #1f7d9c; --gl-svg-blue: #7fb9cd; --gl-svg-red: #c05a4f; --gl-svg-grid: #d8e9ef; --gl-svg-axis: #5b717e;
    --gl-g-indigo1: #163241; --gl-g-indigo2: #1e4153; --gl-g-green1: #4c9d7c; --gl-g-green2: #3a8063;
    --gl-g-blue1: #2f8fae; --gl-g-blue2: #7fb9cd; --gl-g-amber1: #f0b874; --gl-g-amber2: #d99a4e; --gl-g-amber-ink: #4a320f;
    --gl-g-red1: #b3261e; --gl-g-red2: #d15b4f;
    --gl-md-th: #163241; --gl-md-th-ink: #eaf4f8; --gl-ai-bot: #e6f2f7; --gl-ai-bot-line: #d8e9ef;
    --gl-method: #f2f8fa; --gl-method-line: #d8e9ef;
    --gl-amber-bg: #f0c98c; --gl-amber-ink: #3a2410;
    --gl-softline: #d8e9ef; --gl-softline2: #cfe3eb;
}
html[data-theme="red"] {
    --brand: #e2604a; --brand-2: #d3513c; --brand-600: #b8432c; --brand-700: #96341f; --brand-soft: #fbe7e0;
    --ink: #2b1712; --ink-2: #513b33; --muted: #836358; --faint: #b39488;
    --line: #eedfd8; --line-soft: #f9ede8; --bg: #fdeee7; --card: #ffffff;
    --ok: #7d9a5e; --ok-deep: #5c7a42; --ok-soft: #f1f6e9;
    --warn: #e2953c; --warn-deep: #9a5c1f; --warn-soft: #fdf1e2;
    --danger: #b8402f; --danger-deep: #8a2d20; --danger-soft: #faece9;
    --info: #d1543a; --info-deep: #b8432c; --info-soft: #fbe7e0;
    --donut-1: #e2604a; --donut-2: #f08a6e; --donut-3: #b8432c; --donut-4: #3d211a; --donut-5: #b8402f; --donut-6: #c9a294; --donut-teal: #7d9a5e;
    --gl-g1: rgba(255,177,163,.5); --gl-g2: rgba(247,140,124,.38); --gl-g3: rgba(255,208,184,.42);
    --gl-blob1: rgba(255,177,163,.55); --gl-blob2: rgba(247,160,140,.45);
    --gl-card: rgba(255,255,255,.52); --gl-card-2: rgba(255,255,255,.32);
    --gl-border: rgba(255,255,255,.72);
    --gl-side1: rgba(255,255,255,.64); --gl-side2: rgba(255,255,255,.38);
    --gl-hover: rgba(255,255,255,.55);
    --gl-active: #3d211a; --gl-active-ink: #ffffff;
    --gl-th: #f6e2d8; --gl-th-ink: #2b1712;
    --gl-btn1: #3d211a; --gl-btn2: #502b22; --gl-btn-mid1: #9c6f5d; --gl-btn-mid2: #7d5746;
    --gl-btn-ok1: #7d9a5e; --gl-btn-ok2: #5f7c44; --gl-btn-danger1: #b3261e; --gl-btn-danger2: #d15b4f;
    --gl-btn-amber: #f0a04e; --gl-btn-amber2: #d97c36;
    --gl-nav-a: #e2604a; --gl-nav-b: #f2a58c;
    --gl-avatar1: #e2604a; --gl-avatar2: #cf4730;
    --gl-svg-navy: #3d211a; --gl-svg-green: #c07a5e; --gl-svg-amber: #e2604a; --gl-svg-purple: #b8432c; --gl-svg-blue: #dc967b; --gl-svg-red: #b8402f; --gl-svg-grid: #eedfd8; --gl-svg-axis: #836358;
    --gl-g-indigo1: #3d211a; --gl-g-indigo2: #502b22; --gl-g-green1: #7d9a5e; --gl-g-green2: #5c7a42;
    --gl-g-blue1: #dc967b; --gl-g-blue2: #c07a5e; --gl-g-amber1: #f2b8a2; --gl-g-amber2: #e8a083; --gl-g-amber-ink: #4a2a1a;
    --gl-g-red1: #b3261e; --gl-g-red2: #d15b4f;
    --gl-md-th: #3d211a; --gl-md-th-ink: #fbeae4; --gl-ai-bot: #fbeae3; --gl-ai-bot-line: #eedfd8;
    --gl-method: #fdf3ee; --gl-method-line: #eedfd8;
    --gl-amber-bg: #f0c98c; --gl-amber-ink: #3a2410;
    --gl-softline: #eedfd8; --gl-softline2: #e6d3c9;
}

/* ---------- ชั้นโครงสร้างร่วม (ทั้ง 3 ธีม) ---------- */
html[data-theme="glass"] body,
html[data-theme="blue"] body,
html[data-theme="red"] body {
    background:
        radial-gradient(1100px 700px at 82% -8%, var(--gl-g1), transparent 58%),
        radial-gradient(900px 600px at -6% 28%, var(--gl-g2), transparent 60%),
        radial-gradient(1000px 800px at 55% 115%, var(--gl-g3), transparent 62%),
        var(--bg);
}
/* blob ลอยหลังเนื้อหา (pseudo — ไม่แตะ HTML) */
html[data-theme="glass"] body::before,
html[data-theme="blue"] body::before,
html[data-theme="red"] body::before {
    content: ""; position: fixed; z-index: -1; pointer-events: none;
    width: 380px; height: 320px; top: -80px; right: 8%;
    border-radius: 46% 54% 60% 40% / 52% 44% 56% 48%;
    background: var(--gl-blob1); filter: blur(60px); opacity: .85; transform: rotate(18deg);
}
html[data-theme="glass"] body::after,
html[data-theme="blue"] body::after,
html[data-theme="red"] body::after {
    content: ""; position: fixed; z-index: -1; pointer-events: none;
    width: 300px; height: 360px; bottom: -60px; left: 14%;
    border-radius: 46% 54% 60% 40% / 52% 44% 56% 48%;
    background: var(--gl-blob2); filter: blur(60px); opacity: .8; transform: rotate(-14deg);
}

/* ผิวแก้ว — การ์ด/วิดเจ็ตโปร่ง blur (fallback: เบราว์เซอร์ไม่มี backdrop-filter ก็ยังมีพื้นโปร่งอ่านได้) */
html[data-theme="glass"] .card,
html[data-theme="blue"] .card,
html[data-theme="red"] .card,
html[data-theme="glass"] .task,
html[data-theme="blue"] .task,
html[data-theme="red"] .task,
html[data-theme="glass"] .kpi,
html[data-theme="blue"] .kpi,
html[data-theme="red"] .kpi,
html[data-theme="glass"] .ai-panel,
html[data-theme="blue"] .ai-panel,
html[data-theme="red"] .ai-panel,
html[data-theme="glass"] .search-modal,
html[data-theme="blue"] .search-modal,
html[data-theme="red"] .search-modal,
html[data-theme="glass"] .kb-card,
html[data-theme="blue"] .kb-card,
html[data-theme="red"] .kb-card {
    background: linear-gradient(135deg, var(--gl-card), var(--gl-card-2));
    -webkit-backdrop-filter: blur(26px) saturate(1.5);
    backdrop-filter: blur(26px) saturate(1.5);
    border-color: var(--gl-border);
    box-shadow: var(--sh-md), inset 0 1px 0 rgba(255, 255, 255, .6);
}

/* sidebar สว่างโปร่ง + pill มืด (ตาม prototype ที่ไฟเขียว) */
html[data-theme="glass"] .sidebar,
html[data-theme="blue"] .sidebar,
html[data-theme="red"] .sidebar {
    color: var(--ink-2);
    background: linear-gradient(180deg, var(--gl-side1), var(--gl-side2));
    -webkit-backdrop-filter: blur(26px) saturate(1.5);
    backdrop-filter: blur(26px) saturate(1.5);
    box-shadow: 8px 0 32px rgba(15, 23, 42, .16);
}
html[data-theme="glass"] .side-nav::-webkit-scrollbar-thumb,
html[data-theme="blue"] .side-nav::-webkit-scrollbar-thumb,
html[data-theme="red"] .side-nav::-webkit-scrollbar-thumb { background: rgba(15, 23, 42, .18); }
html[data-theme="glass"] .brand-text strong,
html[data-theme="blue"] .brand-text strong,
html[data-theme="red"] .brand-text strong { color: var(--ink); }
html[data-theme="glass"] .brand-text small,
html[data-theme="blue"] .brand-text small,
html[data-theme="red"] .brand-text small { color: var(--muted); }
html[data-theme="glass"] .side-foot .side-foot-info strong,
html[data-theme="blue"] .side-foot .side-foot-info strong,
html[data-theme="red"] .side-foot .side-foot-info strong { color: var(--ink); }
html[data-theme="glass"] .side-foot .side-foot-info small,
html[data-theme="blue"] .side-foot .side-foot-info small,
html[data-theme="red"] .side-foot .side-foot-info small { color: var(--muted); }
html[data-theme="glass"] .side-foot .avatar,
html[data-theme="blue"] .side-foot .avatar,
html[data-theme="red"] .side-foot .avatar {
    background: linear-gradient(135deg, var(--gl-avatar1), var(--gl-avatar2));
    box-shadow: 0 4px 12px rgba(15, 23, 42, .25);
}
html[data-theme="glass"] .nav-section span,
html[data-theme="blue"] .nav-section span,
html[data-theme="red"] .nav-section span {
    background: linear-gradient(90deg, var(--gl-nav-a), var(--gl-nav-b));
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
}
html[data-theme="glass"] .nav-group-head:hover,
html[data-theme="blue"] .nav-group-head:hover,
html[data-theme="red"] .nav-group-head:hover { color: var(--ink); }
html[data-theme="glass"] .nav-link,
html[data-theme="blue"] .nav-link,
html[data-theme="red"] .nav-link { color: var(--ink-2); }
html[data-theme="glass"] .nav-link:hover,
html[data-theme="blue"] .nav-link:hover,
html[data-theme="red"] .nav-link:hover { background: var(--gl-hover); color: var(--ink); }
html[data-theme="glass"] .nav-link.active,
html[data-theme="blue"] .nav-link.active,
html[data-theme="red"] .nav-link.active { background: var(--gl-active); color: var(--gl-active-ink); box-shadow: 0 6px 16px rgba(15, 23, 42, .22); }
html[data-theme="glass"] .nav-link.active::before,
html[data-theme="blue"] .nav-link.active::before,
html[data-theme="red"] .nav-link.active::before {
    background: linear-gradient(180deg, var(--gl-nav-b), var(--gl-nav-a));
    box-shadow: 0 0 10px var(--gl-nav-a);
}

/* topbar แก้วโปร่ง */
html[data-theme="glass"] .topbar,
html[data-theme="blue"] .topbar,
html[data-theme="red"] .topbar { background: linear-gradient(135deg, var(--gl-card), var(--gl-card-2)) !important; border-bottom-color: var(--gl-border); }
html[data-theme="glass"] .top-title,
html[data-theme="blue"] .top-title,
html[data-theme="red"] .top-title { color: var(--ink); }

/* ตาราง — หัวพื้นอ่อนเสมอ (ขั้วเดียวกับ base — กติกา B114) */
html[data-theme="glass"] table.grid th,
html[data-theme="blue"] table.grid th,
html[data-theme="red"] table.grid th,
html[data-theme="glass"] table.table th,
html[data-theme="blue"] table.table th,
html[data-theme="red"] table.table th,
html[data-theme="glass"] .card table th,
html[data-theme="blue"] .card table th,
html[data-theme="red"] .card table th {
    background: linear-gradient(180deg, var(--gl-th), var(--gl-th));
    color: var(--gl-th-ink);
}
html[data-theme="glass"] table.grid tbody tr:hover,
html[data-theme="blue"] table.grid tbody tr:hover,
html[data-theme="red"] table.grid tbody tr:hover,
html[data-theme="glass"] table.table tbody tr:hover,
html[data-theme="blue"] table.table tbody tr:hover,
html[data-theme="red"] table.table tbody tr:hover,
html[data-theme="glass"] .card table tbody tr:hover,
html[data-theme="blue"] .card table tbody tr:hover,
html[data-theme="red"] .card table tbody tr:hover { background: var(--gl-hover); }

/* focus + option 3 states */
html[data-theme="glass"] input:not([type=checkbox]):not([type=radio]):not([type=hidden]):focus,
html[data-theme="blue"] input:not([type=checkbox]):not([type=radio]):not([type=hidden]):focus,
html[data-theme="red"] input:not([type=checkbox]):not([type=radio]):not([type=hidden]):focus,
html[data-theme="glass"] select:focus,
html[data-theme="blue"] select:focus,
html[data-theme="red"] select:focus,
html[data-theme="glass"] textarea:focus,
html[data-theme="blue"] textarea:focus,
html[data-theme="red"] textarea:focus {
    border-color: var(--brand) !important;
    box-shadow: 0 0 0 3px var(--brand-soft) !important;
}
html[data-theme="glass"] select option,
html[data-theme="blue"] select option,
html[data-theme="red"] select option { background: #fff; color: var(--ink-2); }
html[data-theme="glass"] select option:hover,
html[data-theme="blue"] select option:hover,
html[data-theme="red"] select option:hover { background: var(--gl-th); color: var(--ink); }
html[data-theme="glass"] select option:checked,
html[data-theme="blue"] select option:checked,
html[data-theme="red"] select option:checked { background: var(--brand-700); color: #fff; }

/* B148: accent ต้นแบบอ่อนกว่าเดิม — จุดที่พื้น accent + ตัวขาวต้องย้ายไปโทนเข้มกัน contrast ตก */
html[data-theme="glass"] .dp-day.sel,
html[data-theme="blue"] .dp-day.sel,
html[data-theme="red"] .dp-day.sel,
html[data-theme="glass"] .dp-mon.sel,
html[data-theme="blue"] .dp-mon.sel,
html[data-theme="red"] .dp-mon.sel,
html[data-theme="glass"] .ssel-item.sel,
html[data-theme="blue"] .ssel-item.sel,
html[data-theme="red"] .ssel-item.sel { background: var(--brand-700); color: #fff; }
html[data-theme="glass"] .kpi .kpi-num,
html[data-theme="blue"] .kpi .kpi-num,
html[data-theme="red"] .kpi .kpi-num {
    background: linear-gradient(90deg, var(--gl-btn1), var(--gl-btn2));
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent;
}
html[data-theme="glass"] .ai-msg.me,
html[data-theme="blue"] .ai-msg.me,
html[data-theme="red"] .ai-msg.me { background: linear-gradient(135deg, var(--gl-btn1), var(--gl-btn2)); color: #fff; }

/* ปุ่ม */
html[data-theme="glass"] .btn.primary,
html[data-theme="blue"] .btn.primary,
html[data-theme="red"] .btn.primary {
    background: linear-gradient(135deg, var(--gl-btn1), var(--gl-btn2));
    color: #fff; border: none;
    box-shadow: 0 6px 16px rgba(15, 23, 42, .24), inset 0 1px 0 rgba(255, 255, 255, .18);
}
html[data-theme="glass"] .btn.primary:hover,
html[data-theme="blue"] .btn.primary:hover,
html[data-theme="red"] .btn.primary:hover {
    background: linear-gradient(135deg, var(--gl-btn2), var(--gl-btn1));
    box-shadow: 0 10px 22px rgba(15, 23, 42, .28);
}
html[data-theme="glass"] .btn.ghost,
html[data-theme="blue"] .btn.ghost,
html[data-theme="red"] .btn.ghost { border-color: var(--line); color: var(--ink-2); }
html[data-theme="glass"] .btn.ghost:hover,
html[data-theme="blue"] .btn.ghost:hover,
html[data-theme="red"] .btn.ghost:hover { background: var(--brand-soft); border-color: var(--brand); color: var(--ink); }
html[data-theme="glass"] .btn,
html[data-theme="blue"] .btn,
html[data-theme="red"] .btn { box-shadow: 0 2px 6px rgba(15, 23, 42, .16), 0 6px 18px rgba(15, 23, 42, .1); }
html[data-theme="glass"] .btn:focus-visible,
html[data-theme="blue"] .btn:focus-visible,
html[data-theme="red"] .btn:focus-visible { outline: 3px solid var(--brand-soft); }

/* AI / modal / md / method-note */
html[data-theme="glass"] .ai-msg.bot,
html[data-theme="blue"] .ai-msg.bot,
html[data-theme="red"] .ai-msg.bot { background: var(--gl-ai-bot); border-color: var(--gl-ai-bot-line); color: var(--ink); }
html[data-theme="glass"] .md th,
html[data-theme="blue"] .md th,
html[data-theme="red"] .md th { background: var(--gl-md-th); color: var(--gl-md-th-ink); }
html[data-theme="glass"] .md blockquote,
html[data-theme="blue"] .md blockquote,
html[data-theme="red"] .md blockquote { background: var(--brand-soft); color: var(--ink-2); }
html[data-theme="glass"] .method-note,
html[data-theme="blue"] .method-note,
html[data-theme="red"] .method-note { background: var(--gl-method); border-color: var(--gl-method-line); color: var(--ink-2); }
html[data-theme="glass"] .method-note .method-body,
html[data-theme="blue"] .method-note .method-body,
html[data-theme="red"] .method-note .method-body { color: var(--ink-2); border-color: var(--gl-method-line); }
html[data-theme="glass"] .search-btn:hover,
html[data-theme="blue"] .search-btn:hover,
html[data-theme="red"] .search-btn:hover { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); }

/* ไอคอน KPI (.g-*) */
html[data-theme="glass"] .g-indigo,
html[data-theme="blue"] .g-indigo,
html[data-theme="red"] .g-indigo { background: linear-gradient(135deg, var(--gl-g-indigo1), var(--gl-g-indigo2)); box-shadow: 0 6px 16px rgba(15, 23, 42, .3); }
html[data-theme="glass"] .g-green,
html[data-theme="blue"] .g-green,
html[data-theme="red"] .g-green { background: linear-gradient(135deg, var(--gl-g-green1), var(--gl-g-green2)); box-shadow: 0 6px 16px rgba(15, 23, 42, .26); }
html[data-theme="glass"] .g-blue,
html[data-theme="blue"] .g-blue,
html[data-theme="red"] .g-blue { background: linear-gradient(135deg, var(--gl-g-blue1), var(--gl-g-blue2)); box-shadow: 0 6px 16px rgba(15, 23, 42, .26); }
html[data-theme="glass"] .g-amber,
html[data-theme="blue"] .g-amber,
html[data-theme="red"] .g-amber { background: linear-gradient(135deg, var(--gl-g-amber1), var(--gl-g-amber2)); box-shadow: 0 6px 16px rgba(15, 23, 42, .28); }
html[data-theme="glass"] .g-amber i.bi,
html[data-theme="blue"] .g-amber i.bi,
html[data-theme="red"] .g-amber i.bi { color: var(--gl-g-amber-ink); }
html[data-theme="glass"] .g-red,
html[data-theme="blue"] .g-red,
html[data-theme="red"] .g-red { background: linear-gradient(135deg, var(--gl-g-red1), var(--gl-g-red2)); box-shadow: 0 6px 16px rgba(15, 23, 42, .26); }

/* กราฟ SVG (AnalyticsSvg) — ค่า stroke/fill ผ่าน var ต่อธีม */
html[data-theme="glass"] svg [stroke="#1d4569"], html[data-theme="blue"] svg [stroke="#1d4569"], html[data-theme="red"] svg [stroke="#1d4569"] { stroke: var(--gl-svg-navy); }
html[data-theme="glass"] svg [stroke="#198754"], html[data-theme="blue"] svg [stroke="#198754"], html[data-theme="red"] svg [stroke="#198754"] { stroke: var(--gl-svg-green); }
html[data-theme="glass"] svg [stroke="#e8a13c"], html[data-theme="blue"] svg [stroke="#e8a13c"], html[data-theme="red"] svg [stroke="#e8a13c"] { stroke: var(--gl-svg-amber); }
html[data-theme="glass"] svg [stroke="#6f42c1"], html[data-theme="blue"] svg [stroke="#6f42c1"], html[data-theme="red"] svg [stroke="#6f42c1"] { stroke: var(--gl-svg-purple); }
html[data-theme="glass"] svg [stroke="#0d6efd"], html[data-theme="blue"] svg [stroke="#0d6efd"], html[data-theme="red"] svg [stroke="#0d6efd"] { stroke: var(--gl-svg-blue); }
html[data-theme="glass"] svg [stroke="#b02a37"], html[data-theme="blue"] svg [stroke="#b02a37"], html[data-theme="red"] svg [stroke="#b02a37"] { stroke: var(--gl-svg-red); }
html[data-theme="glass"] svg [stroke="#e3e9f0"], html[data-theme="blue"] svg [stroke="#e3e9f0"], html[data-theme="red"] svg [stroke="#e3e9f0"] { stroke: var(--gl-svg-grid); }
html[data-theme="glass"] svg [fill="#1d4569"], html[data-theme="blue"] svg [fill="#1d4569"], html[data-theme="red"] svg [fill="#1d4569"] { fill: var(--gl-svg-navy); }
html[data-theme="glass"] svg [fill="#198754"], html[data-theme="blue"] svg [fill="#198754"], html[data-theme="red"] svg [fill="#198754"] { fill: var(--gl-svg-green); }
html[data-theme="glass"] svg [fill="#e8a13c"], html[data-theme="blue"] svg [fill="#e8a13c"], html[data-theme="red"] svg [fill="#e8a13c"] { fill: var(--gl-svg-amber); }
html[data-theme="glass"] svg [fill="#6f42c1"], html[data-theme="blue"] svg [fill="#6f42c1"], html[data-theme="red"] svg [fill="#6f42c1"] { fill: var(--gl-svg-purple); }
html[data-theme="glass"] svg [fill="#0d6efd"], html[data-theme="blue"] svg [fill="#0d6efd"], html[data-theme="red"] svg [fill="#0d6efd"] { fill: var(--gl-svg-blue); }
html[data-theme="glass"] svg [fill="#b02a37"], html[data-theme="blue"] svg [fill="#b02a37"], html[data-theme="red"] svg [fill="#b02a37"] { fill: var(--gl-svg-red); }
html[data-theme="glass"] svg text[fill="#7c8b9d"], html[data-theme="blue"] svg text[fill="#7c8b9d"], html[data-theme="red"] svg text[fill="#7c8b9d"] { fill: var(--gl-svg-axis); }

/* ปุ่ม inline สีตายตัวจาก views เก่า → ชุดสีธีม */
html[data-theme="glass"] .btn[style*="#1b3a4b"], html[data-theme="blue"] .btn[style*="#1b3a4b"], html[data-theme="red"] .btn[style*="#1b3a4b"],
html[data-theme="glass"] .btn[style*="#2c9cdb"], html[data-theme="blue"] .btn[style*="#2c9cdb"], html[data-theme="red"] .btn[style*="#2c9cdb"],
html[data-theme="glass"] .btn[style*="#6366f1"], html[data-theme="blue"] .btn[style*="#6366f1"], html[data-theme="red"] .btn[style*="#6366f1"],
html[data-theme="glass"] .btn[style*="#0d6efd"], html[data-theme="blue"] .btn[style*="#0d6efd"], html[data-theme="red"] .btn[style*="#0d6efd"] {
    background: linear-gradient(135deg, var(--gl-btn1), var(--gl-btn2)) !important;
    box-shadow: 0 2px 6px rgba(15, 23, 42, .22) !important;
}
html[data-theme="glass"] .btn[style*="#6c757d"], html[data-theme="blue"] .btn[style*="#6c757d"], html[data-theme="red"] .btn[style*="#6c757d"] {
    background: linear-gradient(135deg, var(--gl-btn-mid1), var(--gl-btn-mid2)) !important;
    box-shadow: 0 2px 6px rgba(15, 23, 42, .2) !important;
}
html[data-theme="glass"] .btn[style*="#198754"], html[data-theme="blue"] .btn[style*="#198754"], html[data-theme="red"] .btn[style*="#198754"],
html[data-theme="glass"] .btn[style*="#1e7e45"], html[data-theme="blue"] .btn[style*="#1e7e45"], html[data-theme="red"] .btn[style*="#1e7e45"] {
    background: linear-gradient(135deg, var(--gl-btn-ok1), var(--gl-btn-ok2)) !important;
    box-shadow: 0 2px 6px rgba(15, 23, 42, .2) !important;
}
html[data-theme="glass"] .btn[style*="#dc3545"], html[data-theme="blue"] .btn[style*="#dc3545"], html[data-theme="red"] .btn[style*="#dc3545"] {
    background: linear-gradient(135deg, var(--gl-btn-danger1), var(--gl-btn-danger2)) !important;
    box-shadow: 0 2px 6px rgba(15, 23, 42, .22) !important;
}
html[data-theme="glass"] .btn[style*="#b45309"], html[data-theme="blue"] .btn[style*="#b45309"], html[data-theme="red"] .btn[style*="#b45309"] {
    background: linear-gradient(135deg, var(--gl-btn-amber), var(--gl-btn-amber2)) !important;
    color: #fff !important;
    box-shadow: 0 2px 6px rgba(15, 23, 42, .22) !important;
}
/* B138: ปุ่ม action ที่พื้นเขียว/amber inline — generic sweep rule (ทำไว้สำหรับข้อความ) ไปเปลี่ยน
   color เป็นโทนเข้มบนพื้นเข้ม = อ่านไม่ออก → .btn ต้อง override คืนเป็น gradient + ขาว (ชนะด้วย specificity) */
html[data-theme="glass"] .btn[style*="#1a7f37"], html[data-theme="blue"] .btn[style*="#1a7f37"], html[data-theme="red"] .btn[style*="#1a7f37"],
html[data-theme="glass"] .btn[style*="#16a34a"], html[data-theme="blue"] .btn[style*="#16a34a"], html[data-theme="red"] .btn[style*="#16a34a"] {
    background: linear-gradient(135deg, var(--gl-btn-ok1), var(--gl-btn-ok2)) !important;
    color: #fff !important;
    box-shadow: 0 2px 6px rgba(15, 23, 42, .2) !important;
}
html[data-theme="glass"] .btn[style*="#b9770e"], html[data-theme="blue"] .btn[style*="#b9770e"], html[data-theme="red"] .btn[style*="#b9770e"] {
    background: linear-gradient(135deg, var(--gl-btn-amber), var(--gl-btn-amber2)) !important;
    color: #fff !important;
    box-shadow: 0 2px 6px rgba(15, 23, 42, .22) !important;
}
/* legend สีกราฟฝั่ง HTML (span) */
html[data-theme="glass"] span[style*="background:#1d4569"], html[data-theme="blue"] span[style*="background:#1d4569"], html[data-theme="red"] span[style*="background:#1d4569"] { background: var(--gl-svg-navy) !important; }
html[data-theme="glass"] span[style*="background:#198754"], html[data-theme="blue"] span[style*="background:#198754"], html[data-theme="red"] span[style*="background:#198754"] { background: var(--gl-svg-green) !important; }
html[data-theme="glass"] span[style*="background:#b02a37"], html[data-theme="blue"] span[style*="background:#b02a37"], html[data-theme="red"] span[style*="background:#b02a37"] { background: var(--gl-svg-red) !important; }
html[data-theme="glass"] span[style*="background:#e8a13c"], html[data-theme="blue"] span[style*="background:#e8a13c"], html[data-theme="red"] span[style*="background:#e8a13c"] { background: var(--gl-svg-amber) !important; }

/* B113 sweep — สี inline ชุดที่เหลือ map ผ่าน var (ห้ามแก้ view) */
html[data-theme="glass"] [style*="background:#f59e0b"], html[data-theme="blue"] [style*="background:#f59e0b"], html[data-theme="red"] [style*="background:#f59e0b"],
html[data-theme="glass"] [style*="background:#e8a13c"], html[data-theme="blue"] [style*="background:#e8a13c"], html[data-theme="red"] [style*="background:#e8a13c"],
html[data-theme="glass"] [style*="#b9770e"], html[data-theme="blue"] [style*="#b9770e"], html[data-theme="red"] [style*="#b9770e"],
html[data-theme="glass"] [style*="#d97706"], html[data-theme="blue"] [style*="#d97706"], html[data-theme="red"] [style*="#d97706"],
html[data-theme="glass"] [style*="#ff9800"], html[data-theme="blue"] [style*="#ff9800"], html[data-theme="red"] [style*="#ff9800"] {
    background: var(--gl-amber-bg) !important;
    color: var(--gl-amber-ink) !important;
}
html[data-theme="glass"] [style*="#8e44ad"], html[data-theme="blue"] [style*="#8e44ad"], html[data-theme="red"] [style*="#8e44ad"],
html[data-theme="glass"] [style*="#1f618d"], html[data-theme="blue"] [style*="#1f618d"], html[data-theme="red"] [style*="#1f618d"],
html[data-theme="glass"] [style*="#4f46e5"], html[data-theme="blue"] [style*="#4f46e5"], html[data-theme="red"] [style*="#4f46e5"],
html[data-theme="glass"] [style*="#0ea5e9"], html[data-theme="blue"] [style*="#0ea5e9"], html[data-theme="red"] [style*="#0ea5e9"] {
    background: linear-gradient(135deg, var(--gl-btn1), var(--gl-btn2)) !important;
    color: #fff !important;
}
html[data-theme="glass"] [style*="#c9d4dc"], html[data-theme="blue"] [style*="#c9d4dc"], html[data-theme="red"] [style*="#c9d4dc"],
html[data-theme="glass"] [style*="#d8e0e8"], html[data-theme="blue"] [style*="#d8e0e8"], html[data-theme="red"] [style*="#d8e0e8"],
html[data-theme="glass"] [style*="#dbe2ea"], html[data-theme="blue"] [style*="#dbe2ea"], html[data-theme="red"] [style*="#dbe2ea"],
html[data-theme="glass"] [style*="#dee2e6"], html[data-theme="blue"] [style*="#dee2e6"], html[data-theme="red"] [style*="#dee2e6"],
html[data-theme="glass"] [style*="#e2e8f0"], html[data-theme="blue"] [style*="#e2e8f0"], html[data-theme="red"] [style*="#e2e8f0"],
html[data-theme="glass"] [style*="#e3eaf0"], html[data-theme="blue"] [style*="#e3eaf0"], html[data-theme="red"] [style*="#e3eaf0"],
html[data-theme="glass"] [style*="#e5e9ee"], html[data-theme="blue"] [style*="#e5e9ee"], html[data-theme="red"] [style*="#e5e9ee"],
html[data-theme="glass"] [style*="#eef0f5"], html[data-theme="blue"] [style*="#eef0f5"], html[data-theme="red"] [style*="#eef0f5"],
html[data-theme="glass"] [style*="#e3ecf4"], html[data-theme="blue"] [style*="#e3ecf4"], html[data-theme="red"] [style*="#e3ecf4"],
html[data-theme="glass"] [style*="#bcd6f0"], html[data-theme="blue"] [style*="#bcd6f0"], html[data-theme="red"] [style*="#bcd6f0"] { border-color: var(--gl-softline) !important; }
html[data-theme="glass"] [style*="#fde68a"], html[data-theme="blue"] [style*="#fde68a"], html[data-theme="red"] [style*="#fde68a"],
html[data-theme="glass"] [style*="#f0d49a"], html[data-theme="blue"] [style*="#f0d49a"], html[data-theme="red"] [style*="#f0d49a"],
html[data-theme="glass"] [style*="#f1d9b0"], html[data-theme="blue"] [style*="#f1d9b0"], html[data-theme="red"] [style*="#f1d9b0"],
html[data-theme="glass"] [style*="#fcd34d"], html[data-theme="blue"] [style*="#fcd34d"], html[data-theme="red"] [style*="#fcd34d"] { border-color: var(--gl-softline2) !important; }
html[data-theme="glass"] [style*="#fef3c7"], html[data-theme="blue"] [style*="#fef3c7"], html[data-theme="red"] [style*="#fef3c7"] { background: var(--brand-soft) !important; }
html[data-theme="glass"] [style*="#92400e"], html[data-theme="blue"] [style*="#92400e"], html[data-theme="red"] [style*="#92400e"] { color: var(--gl-amber-ink) !important; }
html[data-theme="glass"] [style*="color:#818cf8"], html[data-theme="blue"] [style*="color:#818cf8"], html[data-theme="red"] [style*="color:#818cf8"] { color: var(--brand-600) !important; }
html[data-theme="glass"] [style*="#c7d2fe"], html[data-theme="blue"] [style*="#c7d2fe"], html[data-theme="red"] [style*="#c7d2fe"],
html[data-theme="glass"] [style*="#4d90fe"], html[data-theme="blue"] [style*="#4d90fe"], html[data-theme="red"] [style*="#4d90fe"] { border-color: var(--brand) !important; }
html[data-theme="glass"] [style*="#1a7f37"], html[data-theme="blue"] [style*="#1a7f37"], html[data-theme="red"] [style*="#1a7f37"],
html[data-theme="glass"] [style*="#16a34a"], html[data-theme="blue"] [style*="#16a34a"], html[data-theme="red"] [style*="#16a34a"] { border-color: var(--ok) !important; color: var(--ok-deep) !important; }
html[data-theme="glass"] [style*="#93c5fd"], html[data-theme="blue"] [style*="#93c5fd"], html[data-theme="red"] [style*="#93c5fd"] { color: var(--muted) !important; }
html[data-theme="glass"] [style*="#4ade80"], html[data-theme="blue"] [style*="#4ade80"], html[data-theme="red"] [style*="#4ade80"] { color: var(--ok-deep) !important; }
html[data-theme="glass"] [style*="#facc15"], html[data-theme="blue"] [style*="#facc15"], html[data-theme="red"] [style*="#facc15"] { color: var(--gl-amber-ink) !important; }
html[data-theme="glass"] [style*="border-left:4px solid #8b5cf6"], html[data-theme="blue"] [style*="border-left:4px solid #8b5cf6"], html[data-theme="red"] [style*="border-left:4px solid #8b5cf6"],
html[data-theme="glass"] [style*="border-left:4px solid #6366f1"], html[data-theme="blue"] [style*="border-left:4px solid #6366f1"], html[data-theme="red"] [style*="border-left:4px solid #6366f1"],
html[data-theme="glass"] [style*="border-left:4px solid #f59e0b"], html[data-theme="blue"] [style*="border-left:4px solid #f59e0b"], html[data-theme="red"] [style*="border-left:4px solid #f59e0b"] { border-left-color: var(--brand) !important; }
html[data-theme="glass"] [style*="background:#94a3b8"], html[data-theme="blue"] [style*="background:#94a3b8"], html[data-theme="red"] [style*="background:#94a3b8"] { background: var(--muted) !important; }
html[data-theme="glass"] [style*="background:#22c55e"], html[data-theme="blue"] [style*="background:#22c55e"], html[data-theme="red"] [style*="background:#22c55e"] { background: var(--ok) !important; }
html[data-theme="glass"] div[style*="border:1px solid #fde68a"], html[data-theme="blue"] div[style*="border:1px solid #fde68a"], html[data-theme="red"] div[style*="border:1px solid #fde68a"] { border-color: var(--gl-softline2) !important; }

/* B116 — สีใน <style> block ของ views (ตาราง PM/Gantt, approval nodes, doc header) */
html[data-theme="glass"] table.pm .bar, html[data-theme="blue"] table.pm .bar, html[data-theme="red"] table.pm .bar { background: var(--gl-svg-amber); color: var(--gl-amber-ink); } /* covers #e6a817 */
html[data-theme="glass"] table.pm td.cell.drop-hint, html[data-theme="blue"] table.pm td.cell.drop-hint, html[data-theme="red"] table.pm td.cell.drop-hint { outline-color: var(--brand); }
html[data-theme="glass"] table.gantt .bar, html[data-theme="blue"] table.gantt .bar, html[data-theme="red"] table.gantt .bar { background: var(--gl-btn1) !important; color: #fff !important; } /* covers #2c9cdb #198754 */
html[data-theme="glass"] table.gantt td.cell.drop-hint, html[data-theme="blue"] table.gantt td.cell.drop-hint, html[data-theme="red"] table.gantt td.cell.drop-hint { outline-color: var(--brand); }
html[data-theme="glass"] .ap-node, html[data-theme="blue"] .ap-node, html[data-theme="red"] .ap-node { border-color: var(--gl-softline); border-left-color: var(--brand); } /* covers #6366f1 */
html[data-theme="glass"] .ap-node.drag-over, html[data-theme="blue"] .ap-node.drag-over, html[data-theme="red"] .ap-node.drag-over { border-color: var(--brand); }
html[data-theme="glass"] .md-alert, html[data-theme="blue"] .md-alert, html[data-theme="red"] .md-alert { border-color: var(--gl-softline2); } /* covers #f1e3c2 */
html[data-theme="glass"] .md-short:hover, html[data-theme="blue"] .md-short:hover, html[data-theme="red"] .md-short:hover { border-color: var(--brand); } /* covers #0e8f8b */
html[data-theme="glass"] .doc .header, html[data-theme="blue"] .doc .header, html[data-theme="red"] .doc .header { border-bottom-color: var(--gl-btn1); } /* covers #1b3a4b */

/* ══════════════════════════════════════════════════════════════
   Grid sort/filter — shared component (C1 + filter ปี/ช่วงวันที่)
   ใช้ CSS vars → เข้ากับทุกธีม/โหมดมืดอัตโนมัติ
   ══════════════════════════════════════════════════════════════ */
th a.gsort { display: inline-flex; align-items: center; gap: 4px; }
svg.gsort-ico { color: var(--muted); display: inline-block; vertical-align: -1px; }
svg.gsort-ico.active { color: var(--brand-600); }

button.gfilter {
    background: transparent; border: none; cursor: pointer; padding: 2px 4px;
    color: var(--muted); border-radius: 6px; line-height: 0; margin-left: 2px;
    vertical-align: middle; opacity: .75;
}
button.gfilter:hover { background: var(--brand-soft); color: var(--brand-600); opacity: 1; }
button.gfilter.active { background: var(--brand-soft); color: var(--brand-600); opacity: 1; }

.gfilter-pop {
    position: absolute; z-index: 80; margin-top: 6px; min-width: 230px;
    background: var(--card); border: 1px solid var(--line); border-radius: 12px;
    box-shadow: 0 12px 32px rgba(15, 23, 42, .18); padding: 12px;
}
.gfilter-pop-body { display: flex; flex-direction: column; gap: 8px; }
.gfilter-pop-body label { display: flex; flex-direction: column; gap: 4px; font-size: .8rem; color: var(--muted); }
.gfilter-pop-body input, .gfilter-pop-body select {
    padding: 7px 10px; border: 1px solid var(--line); border-radius: 8px;
    background: var(--card); color: var(--ink); font-size: .85rem;
}
.gfilter-pop-body input:focus, .gfilter-pop-body select:focus { outline: 2px solid var(--brand); outline-offset: -1px; }
.gfilter-pop-foot { display: flex; gap: 8px; margin-top: 10px; justify-content: flex-end; }

/* ฟอร์มกรองช่วงเวลา (ปี/จาก-ถึง) หน้ารายการ */
.period-filter {
    display: flex; gap: 8px; align-items: end; flex-wrap: wrap;
    padding: 10px 12px; border: 1px dashed var(--line); border-radius: 10px;
    background: var(--line-soft);
}
.period-filter label { display: flex; flex-direction: column; gap: 3px; font-size: .78rem; color: var(--muted); }
.period-filter input, .period-filter select {
    padding: 6px 9px; border: 1px solid var(--line); border-radius: 8px;
    background: var(--card); color: var(--ink); font-size: .85rem;
}
.period-filter .btn { padding: 6px 12px; font-size: .85rem; }