/* addnew-theme.css — ธีมเดียวกับ Todolist (Ascenti "Clean Dashboard") · Owen สั่ง 24 ก.ย. 2026 (D84)
   ขอบเขต: สี · ปุ่ม · ฟอนต์ · การ์ด — โครงหน้า/ตำแหน่ง/ขนาดเดิมทุกอย่าง (Index.html ไม่ถูกแก้ · ไฟล์นี้โหลดต่อท้าย CSS เดิม จึงทับได้)
   โหมดมืด: html[data-theme="dark"] = มืด · "light" = สว่าง · "auto" = ตามเครื่อง (ปุ่ม 🌓 มุมขวาบน · จำต่อเครื่อง)
   สีทั้งหมดผ่านตัวแปร — ค่าเดิมของหน้า (--yellow --ink --line ...) ถูกชี้ไปที่ชุดสีใหม่ด้วย ส่วนที่เดิมเขียนสีตายตัวถูกเขียนทับทีละกฎด้านล่าง */

:root {
  --sky: #2D9CDB; --deep: #2B6CB8; --violet: #7B5BC7; --magenta: #E0457B;
  --acc: #2B6CB8; --acc2: #2D9CDB;
  --bg: #F7F9FC; --surface: #FFFFFF; --surface-2: #F1F4F9; --line-strong: #D3DBE7;
  --mut: #8A94A3; --mut-strong: #5B6676;
  --shadow-t: 0 2px 10px rgba(43,108,184,.07); --shadow-lg: 0 8px 28px rgba(43,108,184,.12);
  --grad-main: linear-gradient(135deg,#2D9CDB,#7B5BC7,#E0457B);
  --grad-acc2: linear-gradient(135deg,#2D9CDB,#7B5BC7);
  --grad-hero: linear-gradient(135deg,rgba(45,156,219,.13),rgba(123,91,199,.13) 50%,rgba(224,69,123,.13));
  --red: #E5484D; --red-bg: #FDECEC; --red-line: #F6C6C8;
  --amber: #B87514; --amber-bg: #FFF6E5; --amber-line: #F1D7A8;
  --green: #2E9E5B; --green-bg: #E7F6EC; --green-line: #BFE5CD;
  --blue-bg: #E9F4FC; --blue-line: #C4DDF3;
  --violet-t: #6A4BB5; --violet-bg: #F1ECFB;
  --tint-cat: #F4F8FD; --tint-sub: #FAF8F4; --tint-cat-h: #E6F0FA; --tint-sub-h: #F2EDE3;
  --topbar-bg: rgba(247,249,252,.88); --veil: rgba(247,249,252,.86); --backdrop: rgba(15,23,33,.45);
  /* ตัวแปรเดิมของหน้า → ชุดสีใหม่ */
  --yellow: #2B6CB8; --yellow-soft: #E9F4FC;
  --ink: #24303E; --muted: #6E7887; --line: #E4E9F1; --paper: #FFFFFF; --wash: #F7F9FC;
  --danger: #E5484D; --success: #2E9E5B;
  --shadow: 0 8px 28px rgba(43,108,184,.12);
  color-scheme: light;
}
html[data-theme="dark"] {
  --acc: #4FA8E0; --acc2: #5FB2E8;
  --bg: #131A24; --surface: #1C2531; --surface-2: #232E3C; --line-strong: #3A4859;
  --mut: #8B95A3; --mut-strong: #AEB7C3;
  --shadow-t: 0 2px 10px rgba(0,0,0,.3); --shadow-lg: 0 8px 28px rgba(0,0,0,.45);
  --grad-hero: linear-gradient(135deg,rgba(45,156,219,.16),rgba(123,91,199,.16) 50%,rgba(224,69,123,.14));
  --red: #F2777B; --red-bg: #3A2226; --red-line: #5A3036;
  --amber: #E3A94E; --amber-bg: #38301E; --amber-line: #5A4A28;
  --green: #57C283; --green-bg: #1E3529; --green-line: #2E5440;
  --blue-bg: #1E2F3F; --blue-line: #2E4A63;
  --violet-t: #B39CEB; --violet-bg: #2A2440;
  --tint-cat: #1F2A37; --tint-sub: #242A30; --tint-cat-h: #243447; --tint-sub-h: #2C3037;
  --topbar-bg: rgba(19,26,36,.88); --veil: rgba(19,26,36,.86); --backdrop: rgba(0,0,0,.55);
  --yellow: #4FA8E0; --yellow-soft: #1E2F3F;
  --ink: #E8EDF3; --muted: #9AA4B2; --line: #2E3A49; --paper: #1C2531; --wash: #131A24;
  --danger: #F2777B; --success: #57C283;
  --shadow: 0 8px 28px rgba(0,0,0,.45);
  color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  html[data-theme="auto"] {
    --acc: #4FA8E0; --acc2: #5FB2E8;
    --bg: #131A24; --surface: #1C2531; --surface-2: #232E3C; --line-strong: #3A4859;
    --mut: #8B95A3; --mut-strong: #AEB7C3;
    --shadow-t: 0 2px 10px rgba(0,0,0,.3); --shadow-lg: 0 8px 28px rgba(0,0,0,.45);
    --grad-hero: linear-gradient(135deg,rgba(45,156,219,.16),rgba(123,91,199,.16) 50%,rgba(224,69,123,.14));
    --red: #F2777B; --red-bg: #3A2226; --red-line: #5A3036;
    --amber: #E3A94E; --amber-bg: #38301E; --amber-line: #5A4A28;
    --green: #57C283; --green-bg: #1E3529; --green-line: #2E5440;
    --blue-bg: #1E2F3F; --blue-line: #2E4A63;
    --violet-t: #B39CEB; --violet-bg: #2A2440;
    --tint-cat: #1F2A37; --tint-sub: #242A30; --tint-cat-h: #243447; --tint-sub-h: #2C3037;
    --topbar-bg: rgba(19,26,36,.88); --veil: rgba(19,26,36,.86); --backdrop: rgba(0,0,0,.55);
    --yellow: #4FA8E0; --yellow-soft: #1E2F3F;
    --ink: #E8EDF3; --muted: #9AA4B2; --line: #2E3A49; --paper: #1C2531; --wash: #131A24;
    --danger: #F2777B; --success: #57C283;
    --shadow: 0 8px 28px rgba(0,0,0,.45);
    color-scheme: dark;
  }
}

/* ---------------------------------------------------------------- ฟอนต์ + พื้น */
body { font-family: "Noto Sans Thai", Inter, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; background: var(--bg); color: var(--ink); transition: background .25s, color .25s; }
a { color: var(--acc); }
input[type="checkbox"], input[type="radio"] { accent-color: var(--acc); }
::placeholder { color: var(--mut); }

/* ---------------------------------------------------------------- แถบซ้าย (พื้นสว่างแบบ Todolist · เมนูที่เลือก = แคปซูลไล่สีแบรนด์) */
.sidebar { background: var(--surface); color: var(--ink); border-right: 1px solid var(--line); transition: background .25s; }
.sidebar::after { display: none; }
.brand-mark { background: var(--grad-main); color: #fff; box-shadow: 0 8px 22px rgba(123,91,199,.28); }
.brand-name { background: var(--grad-main); -webkit-background-clip: text; background-clip: text; color: transparent; font-weight: 700; }
.brand-sub { color: var(--mut); }
.environment-badge { background: var(--surface-2); color: var(--mut-strong); }
.environment-badge[data-environment="DEV"] { background: var(--green-bg); color: var(--green); }
.environment-badge[data-environment="PRODUCTION"] { background: var(--red-bg); color: var(--red); }
.nav-label { color: var(--mut); }
.nav-btn { color: var(--ink); font-weight: 500; border-radius: 12px; }
.nav-btn:hover { color: var(--ink); background: var(--surface-2); transform: none; }
.nav-btn.active { color: #fff; background: var(--grad-main); box-shadow: 0 4px 14px rgba(123,91,199,.35); font-weight: 600; }
.nav-count { background: var(--surface-2); color: var(--mut-strong); }
.nav-btn.active .nav-count { background: rgba(255,255,255,.22); color: #fff; }
.user-box { border-color: var(--line); background: var(--surface-2); }
.avatar { background: var(--grad-main); color: #fff; }
.user-domain { color: var(--mut); }
.user-role { color: var(--violet-t); }

/* ---------------------------------------------------------------- แถบบน */
.topbar { background: var(--topbar-bg); border-bottom-color: var(--line); }
.page-title { font-weight: 700; letter-spacing: 0; }
#themeBtn { margin-left: 9px; }
.top-actions[hidden] + #themeBtn { margin-left: auto; }
#themeBtn .theme-label { font-weight: 500; }

/* ---------------------------------------------------------------- ปุ่ม */
.btn { border-color: var(--line); background: var(--surface); color: var(--ink); border-radius: 12px; font-weight: 600; }
.btn:hover { background: var(--surface-2); box-shadow: var(--shadow-t); }
.btn.primary { background: var(--grad-main); border-color: transparent; color: #fff; }
.btn.primary:hover { background: var(--grad-main); filter: brightness(.93); }
.btn.dark { background: var(--grad-acc2); border-color: transparent; color: #fff; }
.btn.dark:hover { background: var(--grad-acc2); filter: brightness(.93); }
.btn.danger { color: var(--red); border-color: var(--red-line); background: var(--red-bg); }
.btn.danger:hover { background: var(--red-bg); filter: brightness(.97); }
.btn:disabled:hover { filter: none; }
.btn.icon { background: transparent; border-color: transparent; color: var(--mut-strong); }
.btn.icon:hover { background: var(--surface-2); border-color: var(--line); color: var(--acc); }
.btn.icon.spinning { color: var(--acc); }
.back-btn { background: var(--surface); border-color: var(--line); color: var(--ink); border-radius: 12px; }
.back-btn:hover { background: var(--surface-2); }
.row-action { background: var(--surface); border-color: var(--line); color: var(--ink); border-radius: 9px; font-weight: 600; }
.row-action:hover { border-color: var(--line-strong); background: var(--surface-2); }
.add-row { border-color: var(--line-strong); background: var(--surface); color: var(--acc); font-weight: 600; }
.add-row:hover { background: var(--surface-2); }
.remove-row { background: var(--red-bg); color: var(--red); }
.highlight-add button { background: var(--surface); border-color: var(--line-strong); color: var(--mut-strong); }
.highlight-remove { color: var(--mut); }
.highlight-remove:hover:not(:disabled) { color: var(--red); }
.image-action { background: var(--surface-2); color: var(--ink); }
.image-action:hover { background: var(--line); }
.editor-alert-dismiss { color: var(--red); }

/* ---------------------------------------------------------------- การ์ด / แผง */
.hero { background: var(--grad-hero), var(--surface); color: var(--ink); border: 1px solid var(--line); border-radius: 20px; box-shadow: var(--shadow-t); }
.hero::before { border-color: rgba(123,91,199,.12); }
.hero::after { color: rgba(43,108,184,.06); }
.eyebrow { color: var(--violet-t); }
.hero h1 { color: var(--ink); }
.hero p { color: var(--mut-strong); }
.stat { background: var(--surface); border-color: var(--line); border-radius: 16px; box-shadow: var(--shadow-t); }
.stat:hover { border-color: var(--line-strong); }
.stat-top { color: var(--mut-strong); }
.stat-icon { background: var(--blue-bg); color: var(--acc); }
.panel { background: var(--surface); border-color: var(--line); border-radius: 16px; box-shadow: var(--shadow-t); }
.product-card { background: var(--surface); border-color: var(--line); border-radius: 16px; box-shadow: var(--shadow-t); }
.product-card:hover { border-color: var(--line-strong); box-shadow: var(--shadow-lg); }
.product-card.selected { border-color: var(--acc); box-shadow: inset 0 0 0 1px var(--acc), 0 12px 30px rgba(43,108,184,.13); }
.product-card.selected::before { background: var(--grad-main); }
.brand-pill { background: var(--surface-2); color: var(--ink); }
.meta-label { color: var(--mut); }
.card-foot { border-top-color: var(--line); }
.date-chip { color: var(--acc); background: var(--blue-bg); }
.po-chip { color: var(--mut-strong); }
.warning { background: var(--amber); box-shadow: 0 0 0 4px var(--amber-bg); }
.empty-icon { background: var(--blue-bg); }
.editor-section { background: var(--surface); border-color: var(--line); border-radius: 16px; box-shadow: var(--shadow-t); }
.section-index { background: var(--blue-bg); color: var(--acc); }
.editor-section.form-picker { border-color: var(--acc2); background: var(--blue-bg); }
.editor-section.form-picker .editor-section-head { border-bottom-color: var(--blue-line); }
.editor-section.form-picker .section-index { background: var(--surface); }
.side-card { background: var(--surface); border-color: var(--line); border-radius: 16px; box-shadow: var(--shadow-t); }
.controller-card { background: var(--surface-2); border-color: var(--line); }
.template-empty { border-color: var(--line-strong); background: var(--surface-2); }
.image-card { background: var(--surface-2); border-color: var(--line); }
.image-preview { background: var(--surface-2); color: var(--mut); }
.image-preview img { background: #fff; }
.primary-badge { background: var(--grad-main); color: #fff; }
.timeline-item::before { background: var(--acc); box-shadow: 0 0 0 3px var(--blue-bg); }
.timeline-meta { color: var(--mut); }
.ds-choice { background: var(--surface); border-color: var(--line); color: var(--ink); }
.ds-choice:hover { border-color: var(--acc2); background: var(--surface-2); }
.ds-file-link { color: var(--acc); border-color: var(--blue-line); background: var(--blue-bg); }
.ds-file-link:hover { background: var(--blue-bg); filter: brightness(.96); }

/* ---------------------------------------------------------------- ช่องกรอก */
.field { border-color: var(--line); background: var(--surface); color: var(--ink); border-radius: 10px; }
.field:focus { border-color: var(--acc); box-shadow: 0 0 0 4px rgba(43,108,184,.15); }
.mini-field { border-color: var(--line); background: var(--surface); color: var(--ink); }
.mini-field:focus { border-color: var(--acc); }
.special-select { background: var(--surface-2); color: var(--mut-strong); }
.multi-option, .radiator-size, .storage-support { border-color: var(--line); background: var(--surface); color: var(--ink); }
.multi-count { color: var(--violet-t); }
.unit { color: var(--mut); }
.recommended { color: var(--violet-t); background: var(--violet-bg); }
.inline-check { color: var(--mut-strong); }
.repeat-wrap { border-color: var(--line); }
.repeat-head { background: var(--surface-2); color: var(--mut-strong); }
.repeat-row { border-top-color: var(--line); }

/* ---------------------------------------------------------------- ตาราง */
.product-table th { color: var(--mut-strong); border-bottom-color: var(--line); }
.product-table td { border-bottom-color: var(--line); }
.product-table tr:hover td { background: var(--surface-2); }
.set-role-locked td, .set-role-locked:hover td { background: var(--surface-2); }
.set-tag { background: var(--surface-2); color: var(--mut-strong); }
.cr-list .cr-group-start { border-left-color: var(--line-strong); }
.cr-list .cr-col-cat { background: var(--tint-cat); }
.cr-list .cr-col-sub { background: var(--tint-sub); }
.cr-list thead .cr-col-cat { background: var(--tint-cat-h); }
.cr-list thead .cr-col-sub { background: var(--tint-sub-h); }
.cr-list thead th { background: var(--surface); }
.cr-label .required { color: var(--red); }

/* ---------------------------------------------------------------- ป้ายสถานะ */
.status { background: var(--surface-2); color: var(--mut-strong); }
.status-new { background: var(--violet-bg); color: var(--violet-t); }
.status-incomplete { background: var(--amber-bg); color: var(--amber); }
.status-complete { background: var(--blue-bg); color: var(--acc); }
.status-verified, .status-updated { background: var(--green-bg); color: var(--green); }
.status-warning { background: var(--red-bg); color: var(--red); }
.progress { background: var(--surface-2); }
.progress span { background: var(--grad-acc2); }
.who-lock { color: var(--amber); background: var(--amber-bg); }
.sc-tag { background: var(--blue-bg); color: var(--ink); }
.cr-tag.waiting { background: var(--amber-bg); color: var(--amber); }
.cr-tag.done { background: var(--green-bg); color: var(--green); }
.no-form-tag { background: var(--surface-2); color: var(--mut-strong); }
.no-image-tag { background: var(--red-bg); color: var(--red); }

/* ---------------------------------------------------------------- แจ้งเตือนในหน้า */
.lock-banner { background: var(--amber-bg); border-color: var(--amber-line); color: var(--amber); }
.editor-alert, .form-alert { background: var(--red-bg); border-color: var(--red-line); color: var(--red); }
.field-warning { color: var(--amber); background: var(--amber-bg); }
.warranty-preview { color: var(--green); background: var(--green-bg); }
.storage-auto-rule { border-color: var(--green-line); background: var(--green-bg); color: var(--green); }
.storage-auto-rule[data-mode="EMPTY"] { border-color: var(--amber-line); background: var(--amber-bg); color: var(--amber); }
.storage-summary { background: var(--amber-bg); color: var(--ink); }
.storage-summary-max > div { border-color: var(--amber-line); background: var(--surface); }
.storage-summary-max span, .storage-summary-note { color: var(--amber); }
.storage-summary-max strong { color: var(--ink); }
.storage-combination { background: var(--surface); color: var(--ink); }
.storage-summary-warning { color: var(--red); }
.ds-issue.warn { background: var(--amber-bg); color: var(--amber); }
.ds-issue.info { background: var(--surface-2); color: var(--mut-strong); }

/* ---------------------------------------------------------------- กล่องโต้ตอบ / แจ้งเตือนลอย / กำลังโหลด */
.modal-backdrop { background: var(--backdrop); }
.modal { background: var(--surface); color: var(--ink); border-radius: 18px; }
.modal-title { font-weight: 700; letter-spacing: 0; }
.toast { background: var(--surface); color: var(--ink); border: 1px solid var(--line); box-shadow: var(--shadow-lg); }
.toast.success { border-left: 5px solid var(--green); }
.toast.success strong { color: var(--green); }
.toast.error { border-left: 5px solid var(--red); }
.toast.error strong { color: var(--red); }
.loader { background: var(--veil); }
.loader-card { background: var(--surface); color: var(--ink); border: 1px solid var(--line); box-shadow: var(--shadow-lg); }
.spinner { border-color: var(--surface-2); border-top-color: var(--acc); }