/* ════════════════════════════════════════════════════════════════
   ธีมสี — เลือกจากปุ่มตั้งค่าด้านขวา (layouts/theme_picker.php)
   ค่าเริ่มต้น "น้ำเงิน" = ไม่มี attribute (ใช้สีเดิมของ style.css / app.css ทุกประการ)
   ธีมอื่น: <html data-theme-color="..."> ตั้งตัวแปร --th-* แล้ว override สีหลักด้านล่าง
     --th-1 สีอ่อน (บนของ gradient)  --th-2 สีหลัก  --th-3 สีเข้ม  --th-tb สี title bar
     --th-rgb ค่า r,g,b ของสีหลัก (เงา/วงโฟกัส)  --th-50/100/200 พื้นอ่อน/ขอบ
   ════════════════════════════════════════════════════════════════ */
html[data-theme-color="indigo"]  { --th-1: #818cf8; --th-2: #6366f1; --th-3: #4f46e5; --th-tb: #4338ca; --th-rgb: 99,102,241;  --th-50: #eef2ff; --th-100: #e0e7ff; --th-200: #c7d2fe; }
html[data-theme-color="purple"]  { --th-1: #a78bfa; --th-2: #8b5cf6; --th-3: #7c3aed; --th-tb: #6d28d9; --th-rgb: 139,92,246;  --th-50: #f5f3ff; --th-100: #ede9fe; --th-200: #ddd6fe; }
html[data-theme-color="teal"]    { --th-1: #2dd4bf; --th-2: #14b8a6; --th-3: #0d9488; --th-tb: #0f766e; --th-rgb: 20,184,166;  --th-50: #f0fdfa; --th-100: #ccfbf1; --th-200: #99f6e4; }
html[data-theme-color="green"]   { --th-1: #34d399; --th-2: #10b981; --th-3: #059669; --th-tb: #047857; --th-rgb: 16,185,129;  --th-50: #ecfdf5; --th-100: #d1fae5; --th-200: #a7f3d0; }
html[data-theme-color="orange"]  { --th-1: #fb923c; --th-2: #f97316; --th-3: #ea580c; --th-tb: #c2410c; --th-rgb: 249,115,22;  --th-50: #fff7ed; --th-100: #ffedd5; --th-200: #fed7aa; }
html[data-theme-color="rose"]    { --th-1: #fb7185; --th-2: #f43f5e; --th-3: #e11d48; --th-tb: #be123c; --th-rgb: 244,63,94;   --th-50: #fff1f2; --th-100: #ffe4e6; --th-200: #fecdd3; }
html[data-theme-color="slate"]   { --th-1: #64748b; --th-2: #475569; --th-3: #334155; --th-tb: #1e293b; --th-rgb: 71,85,105;   --th-50: #f8fafc; --th-100: #f1f5f9; --th-200: #cbd5e1; }

/* ── ตัวแปรของธีม Medeesoft ── */
html[data-theme-color] {
    --primary-blue: var(--th-2);
    --page-primary: var(--th-3);
    --page-primary-ring: rgba(var(--th-rgb), .12);
    --primary-hover: var(--th-3);
    --blue-light-bg: var(--th-50);
    --ms-titlebar-blue: var(--th-tb);
    --ms-titlebar-blue-shadow: rgba(var(--th-rgb), .28);
    --ms-dt-thead-bg: var(--th-50);
    --ms-dt-thead-bg-to: var(--th-100);
    --ms-dt-thead-color: var(--th-tb);
    --ms-dt-thead-border: var(--th-200);
    --ms-dt-hover-bg: var(--th-50);
    --ms-dt-selected-bg: var(--th-100);
    --ms-dt-selected-child-bg: var(--th-50);
    --ms-dt-selected-text: var(--th-tb);
    --ms-dt-selected-accent: var(--th-tb);
    --ms-modal-head-from: var(--th-100);
    --ms-modal-head-mid: var(--th-50);
    --tb-icon-bg: var(--th-100);
    --tb-icon-fg: var(--th-tb);
}

/* ── สีที่เขียนตายตัวใน style.css / app.css ── */
html[data-theme-color] .ws-titlebar { box-shadow: 0 14px 28px rgba(var(--th-rgb), .2); }
html[data-theme-color] .login-btn,
html[data-theme-color] .ws-hero-cta-icon,
html[data-theme-color] .login-brand-icon,
html[data-theme-color] .dataTables_wrapper .dataTables_paginate .paginate_button.current.current {
    background: linear-gradient(180deg, var(--th-1) 0%, var(--th-2) 55%, var(--th-3) 100%) !important;
    box-shadow: 0 1px 1px rgba(15,23,42,.25), 0 14px 26px -10px rgba(var(--th-rgb), .55), 0 6px 12px -6px rgba(var(--th-rgb), .4), inset 0 1px 0 rgba(255,255,255,.4) !important;
}
html[data-theme-color] .login-btn:hover { filter: brightness(1.06); }
html[data-theme-color] .lm-primary-btn {
    background: linear-gradient(180deg, var(--th-1) 0%, var(--th-2) 55%, var(--th-3) 100%);
    box-shadow: 0 1px 1px rgba(15,23,42,.25), 0 16px 30px -12px rgba(var(--th-rgb), .55), 0 6px 14px -6px rgba(var(--th-rgb), .4), inset 0 1px 0 rgba(255,255,255,.4);
}
html[data-theme-color] .apps-menu-btn {
    background: linear-gradient(160deg, var(--th-50) 0%, var(--th-100) 100%); color: var(--th-3);
    box-shadow: 0 1px 1px rgba(15,23,42,.03), 0 6px 12px -8px rgba(var(--th-rgb), .35), inset 0 1px 0 rgba(255,255,255,.85);
}
html[data-theme-color] .apps-menu-btn:hover,
html[data-theme-color] .apps-menu-btn.active { background: linear-gradient(160deg, var(--th-100) 0%, var(--th-200) 100%); color: var(--th-tb); }
html[data-theme-color] .dt-badge { background: var(--th-50); color: var(--th-3); border-color: var(--th-200); }
html[data-theme-color] .dt-loading { color: var(--th-3); }
html[data-theme-color] .dt-spinner { border-color: var(--th-100); border-top-color: var(--th-3); }
html[data-theme-color] .apps-category-card,
html[data-theme-color] .apps-app-card { --apps-tone: var(--th-tb); --apps-tone-bg: var(--th-100); }
html[data-theme-color] body.ms-app-body .content-area { scrollbar-color: var(--th-tb) rgba(255,255,255,.6); }
html[data-theme-color] .content-area::-webkit-scrollbar-thumb { background-color: var(--th-tb); }
html[data-theme-color] .ws-todo-hd-icon { background: var(--th-100); color: var(--th-tb); }
html[data-theme-color] .ws-todo-tab, html[data-theme-color] .ws-todo-meta .is-mine { color: var(--th-tb); }
html[data-theme-color] .ws-todo-tab em { background: var(--th-tb); color: #fff; }
html[data-theme-color] .ws-todo-ft a { color: var(--th-3); }

/* ════ ปุ่มตั้งค่า (แถบติดขอบขวา) + แผงเลือกธีมสี ════ */
.ws-theme-tab { position: fixed; z-index: 70; right: 0; top: calc(var(--topbar-height, 64px) + 18px); width: 42px; height: 40px;
    display: grid; place-items: center; padding: 0 0 0 2px; border: 0; border-radius: 12px 0 0 12px; cursor: pointer; font-size: 20px;
    background: #fff; color: var(--th-tb, #2852c8);
    box-shadow: 0 2px 6px rgba(12,42,58,.1), 0 14px 28px -14px rgba(12,42,58,.45); }
.ws-theme-tab i { transition: transform .5s cubic-bezier(.2,.8,.2,1); }
.ws-theme-tab:hover i, .ws-theme-tab.is-open i { transform: rotate(90deg); }
.ws-theme-pop { position: fixed; z-index: 90; right: 14px; top: calc(var(--topbar-height, 64px) + 66px); width: 284px; padding: 14px;
    max-height: calc(100vh - var(--topbar-height, 64px) - 82px); overflow-y: auto; scrollbar-width: thin; overscroll-behavior: contain;
    scrollbar-color: var(--th-tb, #2852c8) transparent;   /* scrollbar = สี Primary Dark ของธีม */
    background: rgba(255,255,255,.95); -webkit-backdrop-filter: saturate(1.6) blur(14px); backdrop-filter: saturate(1.6) blur(14px);
    border: 1px solid rgba(255,255,255,.8); border-radius: 16px; box-shadow: 0 2px 6px rgba(12,42,58,.08), 0 22px 44px -18px rgba(12,42,58,.38);
    transform-origin: top right; transition: transform .2s cubic-bezier(.2,.8,.2,1), opacity .15s; }
.ws-theme-pop[hidden] { display: block; opacity: 0; transform: scale(.94) translateY(-6px); pointer-events: none; visibility: hidden; }
.ws-theme-pop-hd { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.ws-theme-pop-hd b { font-size: 13px; font-weight: 800; color: #0f172a; }
.ws-theme-pop-hd small { display: block; font-size: 10.5px; font-weight: 700; color: #94a3b8; }
.ws-theme-pop-hd button { margin-left: auto; width: 28px; height: 28px; border: 0; border-radius: 8px; background: transparent; color: #64748b; cursor: pointer; font-size: 15px; display: grid; place-items: center; }
.ws-theme-pop-hd button:hover { background: #f1f5f9; color: #0f172a; }
.ws-theme-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px 6px; }
.ws-theme-sw { display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 0; border: 0; background: none; cursor: pointer; font: inherit;
    font-size: 10.5px; font-weight: 700; color: #64748b; }
.ws-theme-sw span { width: 36px; height: 36px; border-radius: 12px; display: grid; place-items: center; color: #fff; font-size: 17px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 6px 14px -6px rgba(15,23,42,.45); transition: transform .15s; }
.ws-theme-sw span i { opacity: 0; transition: opacity .15s; }
.ws-theme-sw:hover span { transform: translateY(-2px); }
.ws-theme-sw.is-active { color: #0f172a; }
.ws-theme-sw.is-active span { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--sw), 0 6px 14px -6px rgba(15,23,42,.45); }
.ws-theme-sw.is-active span i { opacity: 1; }
/* scrollbar ของแผง (Chrome/Edge/Safari) — สี Primary Dark ของธีม */
.ws-theme-pop::-webkit-scrollbar { width: 6px; }
.ws-theme-pop::-webkit-scrollbar-track { background: transparent; margin: 12px 0; }
.ws-theme-pop::-webkit-scrollbar-thumb { background: var(--th-tb, #2852c8); border-radius: 999px; }
/* หัวข้อย่อยในแผง */
.ws-theme-sec { margin: 16px 0 10px; padding-top: 14px; border-top: 1px solid rgba(15,23,42,.07); font-size: 12px; font-weight: 800; color: #334155; }
/* ชุดสีของธีม */
.ws-theme-palette { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 10px; }
.ws-theme-chip { display: flex; align-items: center; gap: 8px; min-width: 0; }
.ws-theme-chip span { width: 22px; height: 22px; border-radius: 6px; flex-shrink: 0; box-shadow: inset 0 0 0 1px rgba(15,23,42,.08); transition: background .2s; }
.ws-theme-chip b { display: block; font-size: 11.5px; font-weight: 800; color: #0f172a; line-height: 1.25; white-space: nowrap; }
.ws-theme-chip small { display: block; font-size: 10.5px; font-weight: 700; color: #94a3b8; font-family: ui-monospace, Consolas, monospace; }
/* พื้นหลัง */
.ws-theme-wps { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ws-theme-wp { display: flex; flex-direction: column; padding: 0; border: 1px solid #e3ebf6; border-radius: 12px; overflow: hidden; background: #fff; cursor: pointer; font: inherit; text-align: left;
    transition: transform .15s, box-shadow .15s, border-color .15s; }
.ws-theme-wp span { display: block; aspect-ratio: 16 / 9; background: center / cover no-repeat; }
.ws-theme-wp span.is-plain { background: linear-gradient(45deg, #cfe4ff 0%, #e2eeff 32%, #f3f8ff 62%, #ffffff 100%); }
.ws-theme-wp b { padding: 6px 8px 7px; font-size: 11px; font-weight: 800; color: #334155; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ws-theme-wp:hover { transform: translateY(-1px); box-shadow: 0 8px 18px -10px rgba(15,23,42,.35); }
.ws-theme-wp.is-active { border-color: var(--th-tb, #2852c8); box-shadow: 0 0 0 2px var(--th-tb, #2852c8); }
.ws-theme-wp.is-active b { color: var(--th-tb, #2852c8); }
/* คืนค่าเริ่มต้น */
.ws-theme-reset { width: 100%; margin-top: 14px; height: 38px; border: 1px solid #e2e8f0; border-radius: 11px; background: linear-gradient(180deg, #fff 0%, #f4f7fb 100%);
    color: #334155; font: inherit; font-size: 12.5px; font-weight: 800; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 6px; }
.ws-theme-reset:hover { border-color: #c7d6ec; color: #0f172a; }
@media print { .ws-theme-tab, .ws-theme-pop { display: none !important; } }
/* จอกลาง: เว้นขวาของเนื้อหาให้ปุ่มตั้งค่า (ไม่ทับปุ่มบน title bar) */
@media (min-width: 900px) and (max-width: 1559px) { body.ms-app-body .content-area { padding-right: 56px; } }

/* พื้นหลังหน้าเว็บ: สีไล่โทน (เห็นเมื่อเลือก "ไม่มีภาพ" / ระหว่างโหลดภาพ) เปลี่ยนตามธีม — ชั้นเดียวกับ app.css */
html[data-theme-color] body.ms-app-body .content-area {
    background:
        linear-gradient(180deg, rgba(255,255,255,.18) 0%, rgba(255,255,255,.34) 45%, rgba(255,255,255,.62) 100%),
        var(--ws-wallpaper, none) var(--ws-wallpaper-pos, center) / cover no-repeat,
        linear-gradient(45deg, var(--th-200) 0%, var(--th-100) 32%, var(--th-50) 62%, #ffffff 100%);
}
html[data-theme-color] .ws-theme-wp span.is-plain { background: linear-gradient(45deg, var(--th-200) 0%, var(--th-100) 32%, var(--th-50) 62%, #ffffff 100%); }