/* TE Sales Dashboard — Linear-style dark theme (ยกจาก prototype v3) */

/* ฟอนต์ Inter ของจริง — bundle ในเว็บ (docs/fonts/) ไม่พึ่ง CDN → PWA ออฟไลน์ก็ใช้ได้
   Latin variable (100–900) · ไทยตกไปใช้ Noto Sans Thai / ฟอนต์ระบบ (Inter ไม่มี glyph ไทย) */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/inter-latin.woff2') format('woff2');
}

/* Sarabun (ไทย) — bundle เฉพาะ subset ไทย (~10KB/น้ำหนัก · OFL · github/google/fonts)
   จำกัด unicode-range แค่บล็อกไทย → ตัวเลข/อังกฤษตกไปใช้ Inter ที่ bundle แล้ว (per-glyph fallback)
   ใช้ในตัวเลือกฟอนต์ "Sarabun" (data-font=sarabun) — ขึ้นครบทุกเครื่องรวม iPhone/iPad ที่ไม่มี Sarabun ในระบบ */
@font-face {
  font-family: 'Sarabun';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/sarabun-thai-400.woff2') format('woff2');
  unicode-range: U+0E00-0E7F, U+200B, U+25CC;
}
@font-face {
  font-family: 'Sarabun';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/sarabun-thai-700.woff2') format('woff2');
  unicode-range: U+0E00-0E7F, U+200B, U+25CC;
}

/* IBM Plex Sans Thai (ไทย · subset) — ตัวเลือกฟอนต์ data-font=ibmplex · OFL */
@font-face {
  font-family: 'IBM Plex Sans Thai';
  font-style: normal; font-weight: 400; font-display: swap;
  src: url('../fonts/ibm-plex-sans-thai-thai-400.woff2') format('woff2');
  unicode-range: U+0E00-0E7F, U+200B, U+25CC;
}
@font-face {
  font-family: 'IBM Plex Sans Thai';
  font-style: normal; font-weight: 700; font-display: swap;
  src: url('../fonts/ibm-plex-sans-thai-thai-700.woff2') format('woff2');
  unicode-range: U+0E00-0E7F, U+200B, U+25CC;
}

/* Noto Sans Thai (ไทย · subset) — ตัวเลือกฟอนต์ data-font=noto · OFL */
@font-face {
  font-family: 'Noto Sans Thai';
  font-style: normal; font-weight: 400; font-display: swap;
  src: url('../fonts/noto-sans-thai-thai-400.woff2') format('woff2');
  unicode-range: U+0E00-0E7F, U+200B, U+25CC;
}
@font-face {
  font-family: 'Noto Sans Thai';
  font-style: normal; font-weight: 700; font-display: swap;
  src: url('../fonts/noto-sans-thai-thai-700.woff2') format('woff2');
  unicode-range: U+0E00-0E7F, U+200B, U+25CC;
}

/* ── ฟอนต์ลายมือไทย (นิยมใช้ · SIL OFL · bundle offline ไม่พึ่ง CDN) ──
   ไฟล์รวม latin+thai ในไฟล์เดียว จึงไม่จำกัด unicode-range (ให้ทั้งไทย+อังกฤษเป็นลายมือ) */
@font-face {
  font-family: 'Itim';
  font-style: normal; font-weight: 400; font-display: swap;
  src: url('../fonts/itim-thai-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Mali';
  font-style: normal; font-weight: 400; font-display: swap;
  src: url('../fonts/mali-thai-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Sriracha';
  font-style: normal; font-weight: 400; font-display: swap;
  src: url('../fonts/sriracha-thai-400.woff2') format('woff2');
}

:root {
  --bg:          #0d0e12;
  --bg-panel:    #14161c;
  --bg-elev:     #1a1d25;
  --bg-hover:    #21252f;
  --border:      #262a35;
  --border-soft: #1e222b;

  --text:        #e6e8ee;
  --text-dim:    #9aa0ad;
  --text-mute:   #656b78;

  /* --accent มาจาก "สีเน้น" ที่เลือก ([data-accent]) · soft/text คิดจาก --accent + --text
     → เปลี่ยนสีเน้นหรือธีมทีเดียว ทั้ง 2 ตัวตามเอง ไม่ต้องแก้ทีละสี (step 3.7) */
  --accent:      #5e6ad2;
  --accent-soft: color-mix(in srgb, var(--accent) 16%, transparent);  /* พื้นจาง (nav active ฯลฯ) */
  --accent-text: color-mix(in srgb, var(--accent) 30%, var(--text));  /* ตัวหนังสือบนพื้น accent-soft */
  --on-accent:   #ffffff;   /* ตัวหนังสือบนพื้น accent เต็มสี */

  --green:  #3fb950;
  --yellow: #d29922;
  --red:    #f85149;
  --blue:   #58a6ff;

  /* เส้นขอบโปร่งของสีสถานะ */
  --green-line: #3fb95040;
  --red-line:   #f8514940;

  /* ── สีขั้นตอนงานขาย (funnel) ──
     ไล่โทนน้ำเงินเข้ม→อ่อน + เขียว/แดงปลายทาง · CVD-safe (ยกชุดจาก prototype v3)
     ⚠️ ห้ามฝัง hex พวกนี้ในโค้ด/SVG ให้อ้าง var() เสมอ ไม่งั้นเปลี่ยนธีมแล้วไม่ตาม */
  --stage-lead:    #8a8f98;
  --stage-qualify: #184f95;
  --stage-present: #1c5cab;
  --stage-quote:   #256abf;
  --stage-nego:    #3987e5;
  --stage-won:     #199e70;
  --stage-lost:    #e66767;

  /* ชุดสีกราฟสำหรับ step 1.5 — SVG ต้องเขียน fill="var(--chart-N)" เท่านั้น */
  --chart-1: #5e6ad2;
  --chart-2: #3987e5;
  --chart-3: #199e70;
  --chart-4: #d29922;
  --chart-5: #e66767;
  --chart-6: #8a8f98;

  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;

  --sidebar-w: 232px;
  --safe-b: env(safe-area-inset-bottom, 0px);
  /* ⚠️ ใช้คู่กับ apple-mobile-web-app-status-bar-style=black-translucent ใน index.html
     พอติดตั้งเป็นแอปบน iPhone เนื้อหาจะไหลขึ้นไปใต้รอยบาก ถ้าไม่กันระยะตรงนี้
     หัวข้อหน้ากับปุ่มออกจากระบบจะโดนนาฬิกา/แบตทับ
     บนเว็บปกติและบน desktop ค่านี้เป็น 0px → ไม่กระทบ layout เดิมเลย */
  /* --safe-t-env = ค่าดิบจากเครื่อง ห้ามมีใครทับ
     --safe-t     = ค่าที่ "ส่วนเนื้อหา" ใช้ · js/ui/pwa.js ตั้งเป็น 0 ตอนแถบ PWA โผล่
                    เพราะตอนนั้นแถบเป็นของบนสุดแทน คนกันรอยบากเปลี่ยนมือ
     🔴 ต้องแยกสองตัว ไม่งั้นพอ JS ตั้ง --safe-t = 0 แถบ PWA จะไปกันรอยบากไม่ได้ด้วย
        (ตัวมันเองก็อ่านตัวแปรเดียวกัน) → หัวแถบโดนนาฬิกาทับ */
  --safe-t-env: env(safe-area-inset-top, 0px);
  --safe-t: var(--safe-t-env);

  /* Inter (Latin) มาก่อน → ตัวอังกฤษใช้ Inter · ตัวไทยตกไปฟอนต์ระบบของเครื่อง (per-glyph fallback)
     ⚠️ ห้ามใส่ฟอนต์ไทยที่ bundle (Sarabun/IBM Plex/Noto) ในสแตกเริ่มต้นนี้ —
        ถ้าใส่ ค่าเริ่มต้นจะกลายเป็นฟอนต์นั้นบน iPhone ทันที + ตัวเลือก "Inter" จะซ้ำกับตัวเลือกนั้น
        (ให้เลือกฟอนต์ไทยผ่าน data-font แทน) */
  --font: "Inter", -apple-system, BlinkMacSystemFont,
          "Segoe UI", Roboto, sans-serif;
}

/* ── ตัวเลือกฟอนต์ (step: เลือกฟอนต์ได้) · สลับด้วย <html data-font="..."> ──
   ไม่มี attribute = ค่าเริ่มต้น (Inter) ตาม :root · จำค่าใน localStorage + สคริปต์กันจอกระพริบ
   ⚠️ ต้องเป็น html[data-font] (specificity 0,1,1) เพื่อชนะ --font ที่ตั้งใน :root และใน [data-theme] (0,1,0) */
html[data-font="inter"]   { --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; }
html[data-font="sarabun"] { --font: "Sarabun", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; }
html[data-font="ibmplex"] { --font: "IBM Plex Sans Thai", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; }
html[data-font="noto"]    { --font: "Noto Sans Thai", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; }
html[data-font="system"]  { --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Thonburi", sans-serif; }
/* ฟอนต์ลายมือไทย — ครอบทั้งไทย+อังกฤษ (ไฟล์รวม latin+thai) · fallback ปลอดภัยท้ายสแตก */
html[data-font="itim"]     { --font: "Itim", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; }
html[data-font="mali"]     { --font: "Mali", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; }
html[data-font="sriracha"] { --font: "Sriracha", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; }

/* ═══════════════════════════════════════════════════════════
   ธีม (step 3.7) — เขียนทับเฉพาะสีพื้น/ตัวอักษร/ขอบ
   สีขั้นตอน/กราฟ/สีเน้น คิดต่อจากตัวแปรกลาง จึงตามธีมเอง
   สลับด้วย <html data-theme="..."> · :root = Linear Dark (ค่าตั้งต้น)
   ═══════════════════════════════════════════════════════════ */

/* สว่าง */
[data-theme="light"] {
  --bg:          #f5f6f8;
  --bg-panel:    #ffffff;
  --bg-elev:     #f0f2f5;
  --bg-hover:    #e7eaf0;
  --border:      #d3d8e0;
  --border-soft: #e5e8ee;

  --text:        #1a1d24;
  --text-dim:    #4a5160;
  --text-mute:   #868d9b;

  --green:  #1a9e4b;
  --yellow: #b0790f;
  --red:    #d93a30;
  --blue:   #2a72d0;
  --green-line: color-mix(in srgb, var(--green) 40%, transparent);
  --red-line:   color-mix(in srgb, var(--red) 40%, transparent);
}

/* คอนทราสต์สูง (ดำสนิท ตัวอักษรสว่างเต็ม ขอบชัด) — สำหรับกลางแดด/สายตาไม่ชัด */
[data-theme="contrast"] {
  --bg:          #000000;
  --bg-panel:    #0b0b0d;
  --bg-elev:     #16161a;
  --bg-hover:    #26262c;
  --border:      #55555f;
  --border-soft: #38383f;

  --text:        #ffffff;
  --text-dim:    #d5d7dd;
  --text-mute:   #a6a8b0;

  --accent:      #7c8cff;
  --green:  #4ade5a;
  --yellow: #f2b829;
  --red:    #ff6b60;
  --blue:   #6fb4ff;
  --green-line: color-mix(in srgb, var(--green) 55%, transparent);
  --red-line:   color-mix(in srgb, var(--red) 55%, transparent);
}

/* ── ธีมจาก Claude design (te-theme.css) — noir (ม่วงเข้ม) · brown (น้ำตาลกระดาษ) ──
   ⚠️ ตัด @import Google Fonts ออก (CLAUDE.md ห้ามพึ่ง CDN — PWA ออฟไลน์พัง)
      --font ตั้งชื่อฟอนต์ไว้เป็น "ตัวเลือก" ถ้าเครื่องไม่มีก็ falls back เป็น system font ปลอดภัย */
[data-theme="noir"] {
  --bg:#0e0d14; --bg-panel:#15141f; --bg-elev:#1c1a2a; --bg-hover:#252236;
  --border:#2f2b45; --border-soft:#221f33;
  --text:#e9e9ed; --text-dim:#a19fb4; --text-mute:#6d6a80;
  --accent:#9184d9;
  --green:#3fb950; --yellow:#d29922; --red:#f85149; --blue:#7c8cff;
  --stage-lead:#6d6a80; --stage-qualify:#423a6a; --stage-present:#5d5294;
  --stage-quote:#796cbf; --stage-nego:#968ae0; --stage-won:#3fb950; --stage-lost:#e66767;
  --chart-1:#9184d9; --chart-2:#7c8cff; --chart-3:#3fb950; --chart-4:#d29922; --chart-5:#e66767; --chart-6:#8a8f98;
  --font:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
}

[data-theme="brown"] {
  --bg:#faf6ee; --bg-panel:#ffffff; --bg-elev:#f4ede0; --bg-hover:#ede3d1;
  --border:#dbcfb8; --border-soft:#eae1cf;
  --text:#241f1a; --text-dim:#5f5546; --text-mute:#94897a;
  --accent:#9c5a26;
  --green:#4c7c3c; --yellow:#a5720d; --red:#c04a37; --blue:#2a72d0;
  --stage-lead:#a99e8c; --stage-qualify:#5e3d1c; --stage-present:#7a4c20;
  --stage-quote:#9c5a26; --stage-nego:#c67139; --stage-won:#7a8a5e; --stage-lost:#c04a37;
  --chart-1:#9c5a26; --chart-2:#c67139; --chart-3:#7a8a5e; --chart-4:#a5720d; --chart-5:#c04a37; --chart-6:#94897a;
}

/* ── ธีมแบรนด์ DOS (เจ้าของสั่ง 26 ก.ค. 2569) ──
   ตั้ง --accent เป็นสีแบรนด์ให้ดูตรงแบรนด์ทันที · ผู้ใช้ยังเลือกสีเน้นทับได้ (data-accent มาทีหลัง) */
/* DOS life — ขาว-เขียว */
[data-theme="doslife"] {
  --bg:#f2f7f2; --bg-panel:#ffffff; --bg-elev:#e9f1e9; --bg-hover:#dceadc;
  --border:#c7ddc7; --border-soft:#dfeadf;
  --text:#13251a; --text-dim:#3d5445; --text-mute:#788d7e;
  --accent:#1f9d57;
  --green:#1a9e4b; --yellow:#b0790f; --red:#d93a30; --blue:#2a72d0;
  --green-line: color-mix(in srgb, var(--green) 40%, transparent);
  --red-line:   color-mix(in srgb, var(--red) 40%, transparent);
  --chart-1:#1f9d57; --chart-2:#2a72d0; --chart-3:#7bb661; --chart-4:#b0790f; --chart-5:#d9556f; --chart-6:#8a8f98;
}

/* DOS greenovation — น้ำตาล-ขาว */
[data-theme="greenovation"] {
  --bg:#f7f4ed; --bg-panel:#ffffff; --bg-elev:#efe8db; --bg-hover:#e6dccb;
  --border:#d8ccb4; --border-soft:#e8dfce;
  --text:#2a2016; --text-dim:#5c4f3d; --text-mute:#948674;
  --accent:#7a5230;
  --green:#4c7c3c; --yellow:#a5720d; --red:#c04a37; --blue:#2a72d0;
  --green-line: color-mix(in srgb, var(--green) 40%, transparent);
  --red-line:   color-mix(in srgb, var(--red) 40%, transparent);
  --chart-1:#7a5230; --chart-2:#4c7c3c; --chart-3:#c67139; --chart-4:#a5720d; --chart-5:#c04a37; --chart-6:#94897a;
}

/* ── สีเน้น (accent presets) — คัดมาแล้ว CVD-safe · เปลี่ยนแค่ --accent ที่เหลือ derive เอง ──
   ห้ามเปิดให้จิ้มสีอิสระ (กัน palette เสีย/คอนทราสต์ตก) — เลือกจากชุดนี้เท่านั้น */
[data-accent="blue"]  { --accent: #3987e5; }
[data-accent="teal"]  { --accent: #199e70; }
[data-accent="amber"] { --accent: #c88a1a; }
[data-accent="rose"]  { --accent: #d9556f; }
/* indigo = ค่าตั้งต้นใน :root ไม่ต้องประกาศซ้ำ */

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 14px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
}

button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }

/* ---------- layout ---------- */

.app { display: flex; min-height: 100vh; }

.sidebar {
  width: var(--sidebar-w);
  flex: 0 0 var(--sidebar-w);
  background: var(--bg-panel);
  border-right: 1px solid var(--border-soft);
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
}

.brand { display: flex; gap: 10px; align-items: center; padding: 18px 16px 14px; }
.brand-mark {
  width: 30px; height: 30px; flex: 0 0 30px;
  border-radius: var(--r-sm);
  background: var(--accent);
  display: grid; place-items: center;
  font-size: 12px; font-weight: 700; letter-spacing: .5px;
}
.brand-text { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.brand-text strong { font-size: 13.5px; font-weight: 600; }
.brand-text span { font-size: 11px; color: var(--text-mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.nav { display: flex; flex-direction: column; gap: 2px; padding: 8px; }
.nav-item {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px;
  border-radius: var(--r-sm);
  color: var(--text-dim);
  font-size: 13.5px;
  text-align: left;
  transition: background .12s, color .12s;
}
.nav-item .ico { width: 16px; text-align: center; opacity: .8; font-size: 13px; }
.nav-item:hover { background: var(--bg-hover); color: var(--text); }
.nav-item.is-active { background: var(--accent-soft); color: var(--accent-text); }

/* ⚡ ปุ่มบันทึกด่วนในเมนู — เด่นกว่าเมนูอื่น เข้าถึงง่าย (ระหว่าง Book 3 กับ แผนติดต่อ) */
.nav-quicklog {
  background: var(--accent-soft); color: var(--accent-text);
  border: 1px solid var(--accent);
  font-size: 15px; font-weight: 600; padding: 11px 10px; margin: 2px 0;
}
.nav-quicklog:hover { background: color-mix(in srgb, var(--accent) 24%, transparent); color: var(--text); }
.nav-quicklog .ico { opacity: 1; font-size: 16px; }

.sidebar-foot { margin-top: auto; padding: 12px 16px 16px; display: flex; flex-direction: column; gap: 6px; }
.mode-chip {
  align-self: flex-start;
  font-size: 10.5px; letter-spacing: .3px;
  padding: 3px 8px; border-radius: 999px;
  border: 1px solid var(--border);
  color: var(--text-dim);
}
.ver { font-size: 10.5px; color: var(--text-mute); }

.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.topbar {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 16px;
  padding: 22px 28px 18px;
  border-bottom: 1px solid var(--border-soft);
}
.topbar h1 { font-size: 20px; font-weight: 600; letter-spacing: -.2px; }
.sub { font-size: 12.5px; color: var(--text-mute); margin-top: 2px; }

.pill {
  font-size: 11.5px;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--bg-elev);
  color: var(--text-dim);
  white-space: nowrap;
}
.pill.ok  { color: var(--green);  border-color: var(--green-line); }
.pill.err { color: var(--red);    border-color: var(--red-line); }

.content { padding: 24px 28px 40px; flex: 1; }

.skeleton { color: var(--text-mute); font-size: 13px; }

/* ---------- ชิ้นส่วนพื้นฐานที่ module จะใช้ ---------- */

.card {
  background: var(--bg-panel);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-lg);
  padding: 18px;
}

.grid { display: grid; gap: 14px; }
.grid.cols-4 { grid-template-columns: repeat(4, 1fr); }
.grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.grid.cols-2 { grid-template-columns: repeat(2, 1fr); }

.stat-label { font-size: 11.5px; color: var(--text-mute); letter-spacing: .2px; }
.stat-value { font-size: 24px; font-weight: 600; letter-spacing: -.4px; margin-top: 4px; }
.stat-note  { font-size: 11.5px; color: var(--text-dim); margin-top: 2px; }

.empty {
  border: 1px dashed var(--border);
  border-radius: var(--r-lg);
  padding: 44px 20px;
  text-align: center;
  color: var(--text-mute);
  font-size: 13px;
}
.empty strong { display: block; color: var(--text-dim); font-size: 14px; margin-bottom: 4px; font-weight: 600; }

.bottombar { display: none; }

/* ---------- iPad ---------- */
@media (max-width: 1024px) {
  /* เดิมกว้าง 68px โชว์แต่ไอคอน — เจ้าของขอให้มีชื่อใต้ไอคอนด้วย (23 ก.ค. 2569)
     ขยายเป็น 92px แล้ววางไอคอน/ชื่อเป็นแนวตั้ง */
  :root { --sidebar-w: 92px; }
  .brand-text, .sidebar-foot { display: none; }
  .brand { justify-content: center; padding: 16px 0; }

  /* ไอคอนบน · ชื่อล่าง */
  .nav-item {
    flex-direction: column;
    align-items: center;
    gap: 3px;
    padding: 9px 4px;
    text-align: center;
  }
  .nav-item .ico { width: auto; font-size: 16px; }
  /* .lbl = ป้ายชื่อเมนู (ต้องมี span ครอบใน index.html) — โชว์เป็นตัวเล็กใต้ไอคอน */
  .nav-item .lbl {
    font-size: 10.5px; line-height: 1.15;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden;                      /* ชื่อยาว ("Pending Project") ตัด 2 บรรทัดพอ */
  }
  .content { padding: 20px; }
  .topbar { padding: calc(18px + var(--safe-t)) 20px 14px; }
  .grid.cols-4 { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- มือถือ ≤430px (iPhone / S24) ---------- */
@media (max-width: 430px) {
  .sidebar { display: none; }
  .app { flex-direction: column; }
  .topbar { padding: calc(16px + var(--safe-t)) 16px 12px; }
  .topbar h1 { font-size: 18px; }
  .content { padding: 16px 16px calc(84px + var(--safe-b)); }
  .grid.cols-4, .grid.cols-3, .grid.cols-2 { grid-template-columns: 1fr; }

  .bottombar {
    display: flex;
    position: fixed; left: 0; right: 0; bottom: 0;
    z-index: 20;
    background: color-mix(in srgb, var(--bg-panel) 92%, transparent);
    backdrop-filter: blur(12px);
    border-top: 1px solid var(--border-soft);
    padding: 6px 4px calc(6px + var(--safe-b));
  }
  .bn {
    flex: 1;
    min-height: 44px;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
    font-size: 10px;
    color: var(--text-mute);
    border-radius: var(--r-sm);
  }
  .bn span { font-size: 15px; line-height: 1; }
  .bn.is-active { color: var(--accent-text); background: var(--accent-soft); }
  /* ⚡ บันทึกด่วน ในแถบล่างมือถือ — เด่นให้เห็นง่าย แม้ไม่ได้เลือกอยู่ */
  .bn-quicklog { color: var(--accent-text); font-weight: 700; }
  .bn-quicklog span { transform: scale(1.15); }
}

/* ═══════════════════════════════════════════════════
   F1 · Login + ปุ่ม + ข้อมูลผู้ใช้  (Phase 1.2)
   สีทุกจุดมาจากตัวแปรใน :root เท่านั้น
   ═══════════════════════════════════════════════════ */

/* .app เป็น display:flex ทับ hidden ได้ ต้องบังคับไว้ */
[hidden] { display: none !important; }

/* ---------- ปุ่ม ---------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 40px;
  padding: 9px 16px;
  border-radius: var(--r-sm);
  border: 1px solid transparent;
  font-size: 13.5px; font-weight: 500;
  transition: background .12s, border-color .12s, color .12s, opacity .12s;
}
.btn:disabled { opacity: .6; cursor: default; }

.btn-primary { background: var(--accent); color: var(--on-accent); }
.btn-primary:hover:not(:disabled) { filter: brightness(1.12); }

.btn-ghost { color: var(--text-dim); border-color: var(--border); background: var(--bg-elev); }
.btn-ghost:hover { color: var(--text); border-color: var(--text-mute); }

.btn-sm { min-height: 32px; padding: 5px 11px; font-size: 12.5px; }

/* ---------- หน้าเข้าสู่ระบบ ---------- */

.login {
  min-height: 100vh;
  display: grid; place-items: center;
  padding: calc(24px + var(--safe-t)) 20px calc(24px + var(--safe-b));
  background:
    radial-gradient(1100px 520px at 50% -10%, var(--accent-soft), transparent 70%),
    var(--bg);
}

.login-box {
  width: 100%; max-width: 380px;
  background: var(--bg-panel);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-lg);
  padding: 30px 26px 24px;
  display: flex; flex-direction: column; gap: 14px;
}

.login-mark { width: 38px; height: 38px; flex: none; font-size: 13px; }

.login-box h1 { font-size: 19px; font-weight: 600; letter-spacing: -.2px; }
.login-sub { font-size: 12.5px; color: var(--text-mute); margin-top: -10px; }

.fld { display: flex; flex-direction: column; gap: 6px; }
.fld span { font-size: 12px; color: var(--text-dim); }
.fld-hint { font-size: 10.5px; color: var(--text-mute); line-height: 1.4; }

.fld input {
  width: 100%;
  min-height: 44px;                 /* จุดแตะ ≥44px ตามมาตรฐานมือถือ */
  padding: 10px 12px;
  border-radius: var(--r-sm);
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text);
  font: inherit;
  font-size: 16px;                  /* <16px ทำให้ Safari ซูมหน้าจอเองตอนโฟกัส */
  outline: none;
  transition: border-color .12s, box-shadow .12s;
}
.fld input::placeholder { color: var(--text-mute); }
.fld input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }

.login-err {
  font-size: 12.5px;
  color: var(--red);
  background: var(--bg-elev);
  border: 1px solid var(--red-line);
  border-radius: var(--r-sm);
  padding: 9px 11px;
}

.login-box .btn-primary { margin-top: 2px; }

.login-note {
  font-size: 11.5px; line-height: 1.5;
  color: var(--text-mute);
  text-align: center;
  border-top: 1px solid var(--border-soft);
  padding-top: 12px;
}

/* ---------- ผู้ใช้ที่ล็อกอินอยู่ (ท้าย sidebar) ---------- */

.who { display: flex; align-items: center; gap: 9px; min-width: 0; }

.who-avatar {
  width: 28px; height: 28px; flex: none;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent-text);
  display: grid; place-items: center;
  font-size: 12px; font-weight: 600;
}
.who-text { display: flex; flex-direction: column; line-height: 1.3; min-width: 0; }
.who-text strong {
  font-size: 12.5px; font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.who-text span { font-size: 10.5px; color: var(--text-mute); }

/* flex-wrap + justify-end: พอมีชิปชื่อผู้ใช้เพิ่ม แถวขวาจะยาวเกินจอมือถือ
   ต้องปล่อยให้ห่อลงบรรทัดใหม่ ไม่งั้นล้นจนมีแถบเลื่อนแนวนอน (บทเรียนเดิมจาก .topbar-left) */
.topbar-right { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 8px; flex: 0 1 auto; min-width: 0; }

/* ⚡ ปุ่มบันทึกเร็วบนแถบหัว — ใหญ่กว่า btn-sm ปกติ ~20% (เจ้าของขอ) */
#quickLogBtn { font-size: 15px; padding: 6px 13px; min-height: 38px; }

/* ชิปชื่อผู้ใช้ที่ล็อกอิน บนแถบหัว — ให้เห็นว่าอยู่ account ของใครทุกขนาดจอ */
.topuser {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 3px 11px 3px 3px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--bg-elev);
  max-width: 220px; min-width: 0;
}
.topuser-avatar {
  width: 22px; height: 22px; flex: none;
  border-radius: 999px;
  background: var(--accent-soft); color: var(--accent-text);
  display: grid; place-items: center;
  font-size: 11px; font-weight: 600;
}
.topuser-name {
  font-size: 12px; font-weight: 600; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0;
}
@media (max-width: 430px) { .topuser { max-width: 140px; } }

/* ⚠️ ต้องมี min-width:0 ไม่งั้นชื่อหน้า/คำอธิบายยาว ๆ จะดันแถบขวาทะลุจอ
   (เจอตอน 2.6: ย่อจอจาก desktop มามือถือแล้วล้นออกไป 3px จนมีแถบเลื่อนแนวนอน)
   flex-wrap เป็นตาข่ายกันอีกชั้น ถ้าวันหลังมีปุ่มเพิ่มตรงแถบขวา */
.topbar { flex-wrap: wrap; }
.topbar-left { min-width: 0; flex: 1 1 180px; }
.topbar-left h1 { overflow-wrap: anywhere; }

.only-compact { display: none; }

/* sidebar-foot (ที่มีปุ่มออกจากระบบ) ถูกซ่อนตั้งแต่ ≤1024px
   ปุ่มสำรองบนแถบบนจึงต้องโผล่ตั้งแต่ iPad ไม่ใช่รอถึงมือถือ */
@media (max-width: 1024px) {
  .only-compact { display: inline-flex; }
}

@media (max-width: 430px) {
  .login-box { padding: 26px 20px 20px; }
}

/* ══════════════════════════════════════════════════════════
   F4 Pending Project (Phase 1.4)
   ทุกสีอ้าง var() จาก :root เท่านั้น — ห้ามฝัง hex (กติกา CLAUDE.md)
   ══════════════════════════════════════════════════════════ */

/* ---------- แถบเครื่องมือ ---------- */
.toolbar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 10px; }
.toolbar-sub { margin-bottom: 14px; }
.tl-label { color: var(--text-mute); font-size: 12px; }

.inp {
  background: var(--bg-panel); border: 1px solid var(--border); color: var(--text);
  border-radius: var(--r-sm); padding: 8px 10px;
  font: inherit; font-size: 16px;   /* ≥16px กัน Safari ซูมเองตอนโฟกัส */
  min-height: 38px;
}
.inp:focus { outline: none; border-color: var(--accent); }
.inp-search { flex: 1 1 240px; min-width: 0; }
.inp-sm { padding: 6px 8px; min-height: 34px; font-size: 15px; }

.chk {
  display: inline-flex; align-items: center; gap: 6px;
  color: var(--text-dim); font-size: 13px; cursor: pointer;
  min-height: 34px;
}
.chk input { width: 16px; height: 16px; accent-color: var(--accent); }

/* ตัวเลือกคอลัมน์ */
.colpick { position: relative; }
.colpick > summary { list-style: none; display: inline-flex; }
.colpick > summary::-webkit-details-marker { display: none; }
.colpick-menu {
  position: absolute; z-index: 30; top: calc(100% + 6px); right: 0;
  background: var(--bg-elev); border: 1px solid var(--border);
  border-radius: var(--r-md); padding: 8px 12px; min-width: 190px;
  display: flex; flex-direction: column;
  box-shadow: 0 12px 32px #00000066;
}

.sum { color: var(--text-dim); font-size: 13px; margin-bottom: 10px; }
.sum b { color: var(--text); }

/* แจ้งว่าตัวกรองช่วงเดือนซ่อนงานที่ยังไม่ระบุเดือนไว้กี่งาน (ห้ามซ่อนเงียบ ๆ) */
.filter-hidden-note {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px;
  margin-bottom: 12px; padding: 10px 14px;
  background: var(--accent-soft); border: 1px solid var(--accent);
  border-radius: var(--r-md); color: var(--text-dim); font-size: 12.5px; line-height: 1.5;
}
.filter-hidden-note b { color: var(--text); }
.filter-hidden-note .btn { margin-left: auto; }

/* ---------- ตาราง (desktop) ---------- */
.tbl-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--r-md); }
.tbl { width: 100%; border-collapse: collapse; font-size: 13px; }
.tbl th, .tbl td { padding: 10px 12px; text-align: left; border-bottom: 1px solid var(--border-soft); }
.tbl th {
  position: sticky; top: 0; z-index: 2;
  background: var(--bg-elev); color: var(--text-dim);
  font-weight: 500; white-space: nowrap; cursor: pointer; user-select: none;
}
.tbl th:hover { color: var(--text); }
.tbl td.num, .tbl th.num { text-align: right; font-variant-numeric: tabular-nums; }
.tbl tbody tr { cursor: pointer; }
.tbl tbody tr.no-click { cursor: default; }
.tbl tbody tr:hover { background: var(--bg-hover); }
.tbl tbody tr:last-child td { border-bottom: none; }
.tbl tbody tr.is-archived td { opacity: .5; }

.tag {
  display: inline-block; padding: 2px 8px; border-radius: 999px;
  font-size: 11px; white-space: nowrap;
  color: var(--tag-c, var(--text-dim));
  background: color-mix(in srgb, var(--tag-c, var(--text-mute)) 18%, transparent);
  border: 1px solid color-mix(in srgb, var(--tag-c, var(--text-mute)) 40%, transparent);
}
.due-late { color: var(--red); }

/* ---------- การ์ด (มือถือ) ---------- */
.cards { display: none; flex-direction: column; gap: 10px; }
.pcard {
  cursor: pointer;
  width: 100%; text-align: left; padding: 14px;
  background: var(--bg-panel); border: 1px solid var(--border);
  border-radius: var(--r-md); display: flex; flex-direction: column; gap: 6px;
}
.pcard:active { background: var(--bg-hover); }
.pcard-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.pcard-top strong { font-size: 15px; line-height: 1.4; }
.pcard-mid { color: var(--text-dim); font-size: 13px; }
.pcard-bot { display: flex; justify-content: space-between; color: var(--text-mute); font-size: 12px; }
.pcard-due { font-size: 12px; color: var(--text-mute); }

/* ---------- มุมมองการ์ดที่ผู้ใช้เลือก (laptop / iPad) — 2 คอลัมน์ ----------
   ปกติ laptop/iPad เห็นเป็นตาราง · กดปุ่ม "การ์ด" (.viewmode) → ใส่คลาส .list-cards
   ให้กล่องรายการ แล้วสลับมาโชว์การ์ดเรียง 2 คอลัมน์แทน (เหมือนที่เคยเห็นบน iPad)
   ปุ่มสลับซ่อนบนมือถือ (≤430px) เพราะบังคับการ์ดอยู่แล้ว — ดู media query ด้านล่าง */
.list-cards .tbl-wrap { display: none; }
.list-cards .cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  align-items: start;
}

/* ---------- แผงรายละเอียด ---------- */
.modal {
  position: fixed; inset: 0; z-index: 100;
  background: #00000099; backdrop-filter: blur(2px);
  display: flex; align-items: center; justify-content: center; padding: 20px;
}
.modal-box {
  background: var(--bg-panel); border: 1px solid var(--border);
  border-radius: var(--r-lg); width: min(920px, 100%); max-height: 90vh;
  display: flex; flex-direction: column; overflow: hidden;
}
.modal-head, .modal-foot {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 18px; border-bottom: 1px solid var(--border);
}
.modal-head strong { font-size: 16px; }
.modal-head .btn { margin-left: auto; }
.modal-foot { border-bottom: none; border-top: 1px solid var(--border); }
.modal-foot .spacer { flex: 1; }
/* flex:1 + min-height:0 = เนื้อหายาวแค่ไหน "เนื้อในเลื่อน" แต่หัว/ปุ่มบันทึกท้ายไม่ถูกตัดหาย
   → กด "บันทึก" ได้ทุกจังหวะไม่ต้องเลื่อนตามหา (เจ้าของขอ 27 ก.ค. 2569)
   เดิมไม่มี flex → ฟอร์มยาว (Pending สินค้า/บันทึกเยอะ) ดันกล่องเกิน 90vh แล้ว overflow:hidden ตัดปุ่มบันทึกทิ้ง */
.modal-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 4px 18px 18px; -webkit-overflow-scrolling: touch; }

.fgroup { padding-top: 16px; }
.fgroup h3 {
  font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
  color: var(--text-mute); margin-bottom: 10px;
}
.fgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.fld-wide { grid-column: 1 / -1; }
.fgrid .fld input, .fgrid .fld select, .fgrid .fld textarea {
  background: var(--bg-elev); border: 1px solid var(--border); color: var(--text);
  border-radius: var(--r-sm); padding: 8px 10px;
  font: inherit; font-size: 16px; width: 100%; min-height: 38px;
}
.fgrid .fld textarea { resize: vertical; line-height: 1.5; }
.fgrid .fld input:focus, .fgrid .fld select:focus, .fgrid .fld textarea:focus {
  outline: none; border-color: var(--accent);
}

/* ── ช่องข้อความมีรูปแบบ (rich text) — Pending / Book 3 สี · เจ้าของขอ 27 ก.ค. 2569 ──
   ไฮไลต์ · ตัวหนา · ตัวเอียง · ขีดเส้นใต้ · สีตัวอักษรเข้ม (พาเลตคงที่ กัน CVD/คอนทราสต์) */
.richfield { gap: 6px; }
.rt-toolbar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 3px;
  padding: 4px; background: var(--bg-elev);
  border: 1px solid var(--border); border-bottom: none;
  border-radius: var(--r-sm) var(--r-sm) 0 0;
}
.rt-btn {
  min-width: 30px; min-height: 30px; padding: 2px 8px;
  border: 1px solid var(--border); background: var(--bg-panel); color: var(--text);
  border-radius: var(--r-sm); cursor: pointer; font: inherit; font-size: 14px; line-height: 1;
}
.rt-btn:hover { border-color: var(--accent); }
.rt-btn:active { opacity: .8; }
.rt-sep { width: 1px; align-self: stretch; background: var(--border); margin: 2px 3px; }
.rt-swatches { display: inline-flex; gap: 3px; }
.rt-sw {
  width: 22px; height: 22px; padding: 0; cursor: pointer;
  border: 1px solid var(--border); border-radius: 5px;
  font-size: 13px; font-weight: 700; line-height: 20px; text-align: center;
}
.rt-sw:hover { border-color: var(--text); }
.rt-edit {
  background: var(--bg-elev); border: 1px solid var(--border); color: var(--text);
  border-radius: 0 0 var(--r-sm) var(--r-sm); padding: 8px 10px;
  font: inherit; font-size: 16px; min-height: 72px; line-height: 1.5;
  white-space: pre-wrap; word-break: break-word; overflow-wrap: anywhere;
}
.rt-edit:focus { outline: none; border-color: var(--accent); }
.rt-edit mark { padding: 0 1px; border-radius: 2px; }
/* placeholder ของช่องมีรูปแบบ (contenteditable ว่าง = โชว์ข้อความใบ้) */
.rt-edit:empty::before { content: attr(data-ph); color: var(--text-mute); pointer-events: none; }

/* ── โปรไฟล์ของฉัน (ชื่อ/รหัสผ่าน) — ข้อความสถานะ ── */
.prof-msg { font-size: 13px; align-self: center; }
.prof-ok  { color: var(--green); }
.prof-err { color: var(--red); }

.loglist { list-style: none; margin-top: 12px; display: flex; flex-direction: column; gap: 8px; }
.loglist li {
  background: var(--bg-elev); border: 1px solid var(--border-soft);
  border-radius: var(--r-sm); padding: 10px 12px; font-size: 13px;
}
.log-h { color: var(--text-dim); font-size: 12px; margin-bottom: 2px; }
/* NEXT DOING = "ต้องทำอะไรต่อ" — เน้นให้เด่น อ่านปราดเดียวรู้ (สีเน้น + ตัวหนา + กล่องไฮไลต์) */
.log-next {
  color: var(--accent-text); font-weight: 600;
  margin-top: 6px; padding: 6px 10px;
  background: var(--accent-soft);
  border-left: 3px solid var(--accent);
  border-radius: var(--r-sm);
}
.log-empty { color: var(--text-mute); text-align: center; }
/* เก็บบรรทัด/ย่อหน้าที่ผู้ใช้พิมพ์ไว้ — ไม่งั้นตัวหนังสือติดกันเป็นพืด อ่านยาก */
.log-body { white-space: pre-wrap; word-break: break-word; line-height: 1.55; }

/* ---------- ฟอร์มในโมดัล: 2 คอลัมน์บน laptop/iPad · 1 คอลัมน์เฉพาะมือถือ ----------
   เดิมตัดเป็น 1 คอลัมน์ตั้งแต่ ≤1024px → บนจอ Mac ที่หน้าต่างกว้าง ~1013px (retina/ไม่เต็มจอ)
   ฟอร์มเลยเหลือคอลัมน์เดียวทั้งที่โมดัลกว้างถึง 920px · ลดเหลือ ≤600px ให้ตรงกับสเปก iPad = 2 คอลัมน์
   (media query ใช้หน่วย CSS px จึงไม่เพี้ยนตามความละเอียดจอ retina) */
@media (max-width: 600px) {
  .fgrid { grid-template-columns: 1fr; }
}

/* ---------- มือถือ ≤430px: ตาราง → การ์ด ---------- */
@media (max-width: 430px) {
  .tbl-wrap { display: none; }
  /* มือถือบังคับการ์ด 1 คอลัมน์เสมอ — ล้าง grid ของโหมด .list-cards ทิ้ง (ไม่งั้นการ์ดเบียดเป็น 2 คอลัมน์บนจอเล็ก) */
  .cards, .list-cards .cards { display: flex; grid-template-columns: none; }
  .segmented.viewmode { display: none; } /* มือถือบังคับการ์ดอยู่แล้ว ไม่ต้องมีปุ่มเลือก (specificity ต้องชนะ .segmented) */
  .colpick { display: none; }            /* ไม่มีตารางแล้ว ไม่ต้องเลือกคอลัมน์ */
  .toolbar .btn, .toolbar-sub .btn { min-height: 44px; }   /* จุดแตะ ≥44px */
  .chk { min-height: 44px; }
  .modal { padding: 0; align-items: stretch; }
  .modal-box { width: 100%; max-height: 100vh; border-radius: 0; border: none; }
  .modal-foot { padding-bottom: calc(14px + var(--safe-b)); }
}

/* ---------- ความคืบหน้าล่าสุดในตาราง/การ์ด (1.4b) ---------- */
.lastlog { display: flex; align-items: center; gap: 8px; }
.lastlog-txt { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.lastlog-h { font-size: 11px; color: var(--text-mute); }
.lastlog-t {
  font-size: 12.5px; color: var(--text-dim);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* ชี้เมาส์ที่ข้อความที่ถูกตัดสั้น → เห็นว่าคลิกดูเต็มได้ */
.lastlog-t[data-loghover]:hover { color: var(--accent-text); cursor: help; }
.nolog { font-size: 12px; color: var(--text-mute); flex: 1; }

/* popup ความคืบหน้าเต็ม (loghover.js) — fixed เหมือน .dp-pop กันโดน .tbl-wrap clip */
.loghover {
  position: fixed; z-index: 120; pointer-events: none;
  max-width: 360px; padding: 10px 12px;
  background: var(--bg-elev); border: 1px solid var(--border);
  border-radius: var(--r-md); box-shadow: 0 16px 40px #00000080;
  font-size: 12.5px; color: var(--text); line-height: 1.5;
}
.loghover-h { font-size: 11px; color: var(--text-mute); margin-bottom: 4px; }
.loghover-sec { margin-top: 6px; }
.loghover-sec b {
  display: block; font-size: 10px; letter-spacing: .04em;
  color: var(--text-mute); text-transform: uppercase; margin-bottom: 1px;
}
.loghover-sec div { white-space: pre-wrap; word-break: break-word; }

.btn-log {
  flex: 0 0 auto; white-space: nowrap;
  font-size: 11.5px; padding: 4px 8px; border-radius: var(--r-sm);
  border: 1px solid var(--border); color: var(--text-dim); background: var(--bg-elev);
}
.btn-log:hover { color: var(--accent-text); border-color: var(--accent); }

.tbl th.nosort { cursor: default; }
.tbl th.nosort:hover { color: var(--text-dim); }

.pcard-log { border-top: 1px solid var(--border-soft); padding-top: 8px; margin-top: 2px; }
.pcard-log .btn-log { min-height: 36px; }

/* แผงบันทึกเร็ว */
.modal-sm { width: min(560px, 100%); }
/* ชื่อโครงการ/ลูกค้าบนหัวโมดัลบันทึก — heading ตัวใหญ่ + สีเน้น (เจ้าของขอ 25 ก.ค. 2569) */
.q-sub {
  color: var(--accent); font-size: 18px; font-weight: 700;
  padding-top: 12px; letter-spacing: -.2px; line-height: 1.3;
}
.q-h3 {
  font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
  color: var(--text-mute); margin: 18px 0 0;
}

@media (max-width: 430px) {
  .btn-log { min-height: 44px; padding: 6px 12px; }
}

/* ---------- แก้ไขบันทึกติดตามในที่ (1.4c) ---------- */
.loglist .log-h { display: flex; align-items: center; gap: 8px; }
.log-edit { margin-left: auto; }
.log-edit-box { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border); }
.log-edit-box .fgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.log-edit-box input, .log-edit-box textarea {
  background: var(--bg-panel); border: 1px solid var(--border); color: var(--text);
  border-radius: var(--r-sm); padding: 7px 9px;
  font: inherit; font-size: 16px; width: 100%;
}
.log-edit-box input:focus, .log-edit-box textarea:focus { outline: none; border-color: var(--accent); }
.log-edit-box textarea { resize: vertical; }
.log-edit-foot { display: flex; justify-content: flex-end; gap: 8px; margin-top: 10px; }
.log-edit-foot .lg-foot-sp { flex: 1; }   /* ดันปุ่มลบไปซ้าย · ยกเลิก/บันทึก อยู่ขวา */

@media (max-width: 1024px) { .log-edit-box .fgrid { grid-template-columns: 1fr; } }

/* ══════════════════════════════════════════════════════════
   F3 Dashboard (Phase 1.5) — สีทุกจุดอ้าง var() จาก :root
   ══════════════════════════════════════════════════════════ */

.card.is-risk { border-color: var(--red-line); }
.card.is-risk .stat-note { color: var(--red); }

/* แถบความคืบหน้าเทียบเป้า */
.prog-wrap { margin: 16px 0 4px; }
.prog {
  height: 10px; border-radius: 999px; overflow: hidden;
  background: var(--bg-elev); border: 1px solid var(--border);
}
.prog i { display: block; height: 100%; background: var(--chart-3); transition: width .4s; }
.prog-note { font-size: 12px; color: var(--text-dim); margin-top: 6px; }

.sec { margin-top: 18px; }
.sec-grid { margin-top: 18px; }
.sec-grid .sec { margin-top: 0; }
.sec-h {
  font-size: 13px; font-weight: 600; margin-bottom: 14px;
  display: flex; align-items: center; gap: 8px;
}
.sec-sub { font-size: 11px; color: var(--text-mute); font-weight: 400; }
.sec-foot { font-size: 11.5px; color: var(--text-mute); margin-top: 10px; }

.badge-risk {
  background: var(--red); color: var(--on-accent);
  font-size: 11px; padding: 1px 7px; border-radius: 999px;
}

/* กราฟ */
.chart { max-width: 100%; height: auto; display: block; }
/* โซนชี้เมาส์บนกราฟ (โปร่งใส · ไฮไลต์คอลัมน์ตอนชี้) */
.chart-zone { fill: transparent; cursor: crosshair; }
.chart-zone:hover { fill: var(--accent); opacity: .07; }
/* tooltip ตามเมาส์บนกราฟ (fixed กันโดน .card ตัด) */
.charttip {
  position: fixed; z-index: 130; pointer-events: none;
  min-width: 168px; padding: 9px 11px;
  background: var(--bg-elev); border: 1px solid var(--border);
  border-radius: var(--r-md); box-shadow: 0 12px 32px #00000066;
  font-size: 12px; color: var(--text); line-height: 1.5;
}
.charttip-h { font-size: 11px; color: var(--text-mute); margin-bottom: 5px; }
.charttip-r { display: flex; align-items: center; gap: 7px; }
.charttip-r i { width: 9px; height: 9px; border-radius: 2px; flex: 0 0 auto; }
.charttip-r span { flex: 1; color: var(--text-dim); }
.charttip-r b { font-variant-numeric: tabular-nums; }

/* การ์ดเป้า คลิกได้ → drill-down */
.stat-clickable { cursor: pointer; transition: border-color .12s, transform .06s; }
.stat-clickable:hover { border-color: var(--accent); }
.stat-clickable:active { transform: translateY(1px); }
.stat-more { font-size: 11px; color: var(--accent-text); font-weight: 400; }

/* หน้ารายละเอียดเป้า (drill) */
.drill-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; }
.drill-tbl td, .drill-tbl th { padding: 5px 10px; }
.drill-tbl .drill-out td { opacity: .45; }
.drill-tbl .drill-sum td { border-top: 1px solid var(--border-soft); font-weight: 600; color: var(--text-dim); }
.drill-tbl .drill-year td { border-top: 2px solid var(--border); font-weight: 700; color: var(--accent-text); }
.legend { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 8px; font-size: 11.5px; color: var(--text-dim); }
.legend i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 5px; vertical-align: -1px; }

/* funnel */
.fn-row { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; font-size: 12.5px; }
.fn-label { flex: 0 0 118px; color: var(--text-dim); }
.fn-bar { flex: 1; height: 14px; background: var(--bg-elev); border-radius: var(--r-sm); overflow: hidden; }
.fn-bar i { display: block; height: 100%; border-radius: var(--r-sm); }
.fn-val { flex: 0 0 auto; color: var(--text-mute); font-size: 11.5px; white-space: nowrap; }

/* top 3 */
.top3 { list-style: none; counter-reset: t; }
.top3 li {
  counter-increment: t;
  display: grid; grid-template-columns: 22px 1fr auto; gap: 4px 10px;
  align-items: baseline; padding: 9px 0; border-bottom: 1px solid var(--border-soft);
}
.top3 li:last-child { border-bottom: none; }
.top3 li::before { content: counter(t); color: var(--text-mute); font-size: 12px; }
.t3-name { font-size: 13.5px; }
.t3-meta { grid-column: 2; font-size: 11.5px; color: var(--text-mute); }
/* ต้องปักคอลัมน์ให้ b (มูลค่า) — มันมี grid-row:1 (ล็อกแถว ไม่ล็อกคอลัมน์)
   อัลกอริทึม auto-placement ของ grid วางไอเท็มที่ล็อกแถวก่อนไอเท็ม auto ล้วน
   ถ้าไม่ปักคอลัมน์ b จะไปแย่งคอลัมน์ 1 (ช่องอันดับ 22px) → "12.4 ล้าน" ตกบรรทัดไปอยู่ซ้าย */
.top3 b { grid-column: 3; grid-row: 1; text-align: right; font-variant-numeric: tabular-nums; }

/* งานเลยกำหนด */
.odlist { list-style: none; }
.odlist li {
  display: grid; grid-template-columns: 96px 1fr; gap: 2px 12px;
  padding: 8px 0; border-bottom: 1px solid var(--border-soft); font-size: 13px;
}
.odlist li:last-child { border-bottom: none; }
.od-date { color: var(--red); font-size: 12px; font-variant-numeric: tabular-nums; }
.od-act { grid-column: 2; font-size: 11.5px; color: var(--text-mute); }

@media (max-width: 430px) {
  .fn-label { flex: 0 0 84px; font-size: 11.5px; }
  .fn-val { font-size: 10.5px; }
  .odlist li { grid-template-columns: 1fr; }
  .od-act { grid-column: 1; }
}

/* บอกผู้ใช้ว่ากดปุ่มไหนก็ได้ (เคยพิมพ์แล้วกดปุ่มบันทึกใหญ่ ข้อความหาย) */
.lg-add-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.lg-hint { font-size: 11.5px; color: var(--text-mute); }

/* ---------- แถบสถานะงาน (กำลังทำ / Archive / ทั้งหมด) ---------- */
.segmented {
  display: inline-flex; border: 1px solid var(--border);
  border-radius: var(--r-sm); overflow: hidden; background: var(--bg-panel);
}
.segmented button {
  padding: 7px 12px; font-size: 12.5px; color: var(--text-dim);
  border-right: 1px solid var(--border); min-height: 38px;
  display: inline-flex; align-items: center; gap: 6px;
}
.segmented button:last-child { border-right: none; }
.segmented button:hover { background: var(--bg-hover); color: var(--text); }
.segmented button.on { background: var(--accent-soft); color: var(--accent-text); }
.seg-badge {
  background: var(--bg-elev); border: 1px solid var(--border);
  color: var(--text-dim); font-size: 10.5px; padding: 0 6px; border-radius: 999px;
}
.segmented button.on .seg-badge { background: var(--accent); color: var(--on-accent); border-color: transparent; }

/* ---------- ปุ่มอันตราย (เก็บเข้า Archive) ---------- */
.btn-danger {
  background: transparent; color: var(--red);
  border: 1px solid var(--red-line);
}
.btn-danger:hover { background: color-mix(in srgb, var(--red) 12%, transparent); border-color: var(--red); }
/* ติดอาวุธแล้ว = รอกดยืนยันครั้งที่ 2 ให้เห็นชัดว่าเปลี่ยนสถานะ */
.btn-danger.is-armed { background: var(--red); color: var(--on-accent); border-color: var(--red); }

@media (max-width: 430px) {
  .segmented button { min-height: 44px; padding: 7px 14px; }
}

/* ══════════════════════════════════════════════════════════
   ปฏิทินเลือกวันที่ (1.4f) — แสดง พ.ศ. · เก็บ ค.ศ.
   ══════════════════════════════════════════════════════════ */
.dp { position: relative; display: block; }
.dp-view {
  width: 100%; cursor: pointer;
  background: var(--bg-elev); border: 1px solid var(--border); color: var(--text);
  border-radius: var(--r-sm); padding: 8px 30px 8px 10px;
  font: inherit; font-size: 16px; min-height: 38px;
}
.dp-view:focus { outline: none; border-color: var(--accent); }
.dp-view::placeholder { color: var(--text-mute); }
.dp-x {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  width: 22px; height: 22px; border-radius: var(--r-sm);
  color: var(--text-mute); font-size: 16px; line-height: 1;
}
.dp-x:hover { color: var(--red); background: var(--bg-hover); }

/* popup — position:fixed เพื่อให้ลอยพ้นกล่อง modal ที่มี overflow:auto */
.dp-pop {
  position: fixed; z-index: 200;
  background: var(--bg-elev); border: 1px solid var(--border);
  border-radius: var(--r-md); padding: 10px;
  box-shadow: 0 16px 40px #00000080;
  width: 262px;
}
.dp-head { display: flex; align-items: center; gap: 6px; margin-bottom: 8px; }
.dp-nav {
  width: 28px; height: 28px; border-radius: var(--r-sm);
  color: var(--text-dim); font-size: 16px; line-height: 1;
}
.dp-nav:hover { background: var(--bg-hover); color: var(--text); }
.dp-sel {
  flex: 1; min-width: 0;
  background: var(--bg-panel); border: 1px solid var(--border); color: var(--text);
  border-radius: var(--r-sm); padding: 4px 6px; font: inherit; font-size: 13px;
}
.dp-sel:focus { outline: none; border-color: var(--accent); }

.dp-dow, .dp-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.dp-dow span { text-align: center; font-size: 11px; color: var(--text-mute); padding: 2px 0; }
.dp-d {
  height: 32px; border-radius: var(--r-sm);
  font-size: 13px; color: var(--text-dim);
  display: flex; align-items: center; justify-content: center;
}
.dp-d:hover { background: var(--bg-hover); color: var(--text); }
.dp-pad { pointer-events: none; }
.dp-d.today { border: 1px solid var(--border); color: var(--text); }
.dp-d.on { background: var(--accent); color: var(--on-accent); border-color: transparent; }

.dp-foot { display: flex; gap: 6px; margin-top: 8px; border-top: 1px solid var(--border-soft); padding-top: 8px; }
.dp-btn {
  flex: 1; padding: 6px; border-radius: var(--r-sm);
  border: 1px solid var(--border); color: var(--text-dim); font-size: 12px;
}
.dp-btn:hover { background: var(--bg-hover); color: var(--text); }

/* ช่อง "พิมพ์เอง" ในปฏิทิน — ระบุวันที่ตรง ๆ (โดยเฉพาะวันเกิดย้อนหลังไกล) */
.dp-type { display: flex; gap: 6px; margin-top: 6px; }
.dp-typein {
  flex: 1; min-width: 0; padding: 6px 8px; font-size: 12.5px;
  border: 1px solid var(--border); border-radius: var(--r-sm);
  background: var(--bg-elev); color: var(--text);
}
.dp-typein::placeholder { color: var(--text-mute); }
.dp-typein.dp-bad { border-color: var(--danger, #e23b3b); }
.dp-typego { flex: 0 0 auto; padding: 6px 12px; }

@media (max-width: 430px) {
  .dp-pop { width: calc(100vw - 24px); max-width: 300px; }
  .dp-d { height: 40px; }        /* จุดแตะบนมือถือ */
  .dp-btn { min-height: 44px; }
  .dp-typein { min-height: 44px; }
}

/* ---------- F5 Book 3 สี (2.2) ---------- */
.b3dot { font-size: 15px; line-height: 1; }
.t2 { font-size: 11.5px; color: var(--text-mute); margin-top: 2px; }
.btn-log.is-done { color: var(--green); border-color: var(--green-line); }
#bColor .seg-badge { margin-left: 2px; }

/* ---------- F6 แผนติดต่อลูกค้า (2.3) ---------- */

/* แถบเพิ่มเร็ว — สิ่งที่ใช้บ่อยที่สุดในหน้านี้ ต้องอยู่บนสุดและกรอกได้ในบรรทัดเดียว */
.qadd { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 10px; }
.qadd .inp { flex: 1 1 260px; min-width: 0; }
.qadd-date { flex: 0 0 auto; width: 150px; }

.sum-risk { color: var(--red); }

.agrp { margin-bottom: 16px; }
.agrp-h {
  display: flex; align-items: center; gap: 8px;
  font-size: 12px; font-weight: 600; letter-spacing: .02em;
  text-transform: none; margin-bottom: 6px; color: var(--text-dim);
}
.agrp-h::before {
  content: ''; width: 8px; height: 8px; border-radius: 50%;
  background: currentColor; flex: 0 0 auto;
}
.agrp-n {
  font-size: 11px; color: var(--text-mute); font-weight: 400;
  background: var(--bg-elev); border-radius: 999px; padding: 1px 7px;
}
.agrp-red    { color: var(--red); }
.agrp-accent { color: var(--accent-text); }
.agrp-blue   { color: var(--blue); }
.agrp-green  { color: var(--green); }
.agrp-mute   { color: var(--text-mute); }

.alist { list-style: none; }
.arow {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 10px 12px; border: 1px solid var(--border-soft);
  border-radius: var(--r-md); background: var(--bg-panel);
  margin-bottom: 6px; cursor: pointer;
}
.arow:hover { background: var(--bg-hover); border-color: var(--border); }
.arow.is-overdue { border-color: var(--red-line); }
.arow.is-done .atitle, .arow.is-cancel .atitle { text-decoration: line-through; color: var(--text-mute); }
.arow.is-done, .arow.is-cancel { opacity: .7; }

/* ปุ่มติ๊กเสร็จ — จุดแตะ 44px ตามกติกา mobile ถึงวงกลมจะเล็กกว่านั้น */
.achk {
  flex: 0 0 auto; width: 22px; height: 22px; margin-top: 1px;
  border-radius: 50%; border: 1.5px solid var(--border);
  background: transparent; color: var(--green);
  font-size: 13px; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.achk:hover { border-color: var(--green); background: var(--bg-elev); }
.achk[aria-pressed="true"] { border-color: var(--green); background: var(--green-line); }
.achk:disabled { opacity: .5; cursor: default; }

.amain { flex: 1; min-width: 0; }
.atitle { font-size: 13.5px; color: var(--text); word-break: break-word; }
.ameta {
  display: flex; flex-wrap: wrap; gap: 6px 10px;
  margin-top: 3px; font-size: 11.5px; color: var(--text-mute);
}
.alink { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.aowner { color: var(--text-dim); font-weight: 500; }
/* ลิงค์แจ้งเตือน (ปฏิทิน/.ics/ไลน์) บนสิ่งที่ต้องทำ */
.a-remind { display: inline-flex; gap: 4px; }
.a-rbtn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 22px; text-decoration: none; font-size: 13px; line-height: 1;
  border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--bg-elev);
}
.a-rbtn:hover { border-color: var(--accent); }
@media (max-width: 430px) { .a-rbtn { width: 40px; height: 34px; font-size: 15px; } }
.ateam {
  border: 1px solid var(--border); border-radius: var(--r-sm);
  padding: 0 5px; font-size: 10.5px;
}
.adate {
  flex: 0 0 auto; font-size: 11.5px; color: var(--text-dim);
  font-variant-numeric: tabular-nums; white-space: nowrap; padding-top: 2px;
}
.arow.is-overdue .adate { color: var(--red); }

@media (max-width: 430px) {
  .qadd-date { width: 100%; }
  .achk { width: 26px; height: 26px; }
  .arow { padding: 12px; }
}
.od-date.is-today { color: var(--accent-text); }
.lnk { color: var(--accent-text); text-decoration: none; }
.lnk:hover { text-decoration: underline; }

/* ---------- F11 หน้า Admin (2.4) ---------- */
.tg-foot { display: flex; align-items: center; gap: 12px; }
.ok-msg { color: var(--green); }

.t-mail { font-size: 11.5px; color: var(--text-dim); word-break: break-all; }
.tag-me {
  font-size: 10px; color: var(--accent-text); background: var(--accent-soft);
  border-radius: var(--r-sm); padding: 1px 5px; vertical-align: 1px;
}
.tbl td select {
  width: 100%; min-width: 90px; padding: 5px 6px; font-size: 12.5px;
  background: var(--bg-elev); color: var(--text);
  border: 1px solid var(--border); border-radius: var(--r-sm);
}
.tbl td select:disabled { opacity: .5; }

/* สวิตช์เปิด/ปิดบัญชี */
.sw { display: flex; align-items: center; gap: 6px; font-size: 12px; cursor: pointer; }
.sw input { width: 16px; height: 16px; accent-color: var(--accent); cursor: pointer; }
.sw input:disabled { cursor: default; opacity: .5; }

.tmlist { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; }
.tmlist li {
  display: flex; align-items: baseline; gap: 8px;
  border: 1px solid var(--border); border-radius: var(--r-md);
  padding: 7px 12px; background: var(--bg-elev); font-size: 12.5px;
}
.tmlist li span { color: var(--text-mute); font-size: 11.5px; }

.aclist { list-style: none; display: flex; flex-direction: column; gap: 4px; }
.aclist label {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; border: 1px solid var(--border-soft);
  border-radius: var(--r-md); cursor: pointer; font-size: 13px;
}
.aclist label:hover { background: var(--bg-hover); }
.aclist input { width: 18px; height: 18px; accent-color: var(--accent); flex: 0 0 auto; }
.aclist span { color: var(--text-mute); font-size: 11.5px; }
.aclist em {
  margin-left: auto; font-style: normal; font-size: 11px;
  color: var(--accent-text); background: var(--accent-soft);
  border-radius: var(--r-sm); padding: 1px 6px;
}
.aclist .is-own { cursor: default; opacity: .75; }

@media (max-width: 430px) {
  .aclist label { padding: 12px; }        /* จุดแตะ 44px */
  .tmlist li { flex: 1 1 100%; }
}

/* ---------- Archive (2.5) ---------- */
.arch-hint {
  margin: 0 18px 10px; padding: 10px 12px;
  border: 1px solid var(--border); border-left: 3px solid var(--chart-4);
  border-radius: var(--r-sm); background: var(--bg-elev);
  font-size: 12px; color: var(--text-dim); line-height: 1.6;
}

/* ---------- F12 ลายเซ็นหัวหน้า / รอตรวจ (2.6) ---------- */
.so-bar {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 12px 14px; margin-bottom: 16px;
  border: 1px solid var(--border); border-left-width: 3px;
  border-radius: var(--r-md); background: var(--bg-elev);
}
.so-bar.so-ok    { border-left-color: var(--green); }
.so-bar.so-stale { border-left-color: var(--red); }
.so-bar.so-none  { border-left-color: var(--text-mute); }
.so-ico { font-size: 16px; line-height: 1.3; flex: 0 0 auto; }
.so-ok .so-ico    { color: var(--green); }
.so-stale .so-ico { color: var(--red); }
.so-none .so-ico  { color: var(--text-mute); }
.so-body { flex: 1; min-width: 0; }
.so-h { font-size: 13px; font-weight: 600; margin-bottom: 2px; }
.so-ok .so-h    { color: var(--green); }
.so-stale .so-h { color: var(--red); }
.so-none .so-h  { color: var(--text-dim); }
.so-d { font-size: 12px; color: var(--text-dim); line-height: 1.6; }
.so-note {
  margin-top: 6px; font-size: 12px; color: var(--text-dim);
  border-left: 2px solid var(--border); padding-left: 8px;
}
.so-form {
  margin: -6px 0 16px; padding: 12px 14px;
  border: 1px solid var(--border); border-radius: var(--r-md); background: var(--bg-panel);
}
.so-warn { font-size: 11.5px; color: var(--yellow); margin: 8px 0 0; line-height: 1.6; }
.so-foot { display: flex; justify-content: flex-end; gap: 8px; margin-top: 10px; }

.so-tag {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11px; border-radius: var(--r-sm); padding: 2px 7px;
  border: 1px solid var(--border); white-space: nowrap;
}
.so-tag.so-ok    { color: var(--green);     border-color: var(--green-line); }
.so-tag.so-stale { color: var(--red);       border-color: var(--red-line); }
.so-tag.so-none  { color: var(--text-mute); }

.rvlist { list-style: none; }
.rvrow {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 12px; margin-bottom: 6px; cursor: pointer;
  border: 1px solid var(--border-soft); border-radius: var(--r-md);
  background: var(--bg-panel);
}
.rvrow:hover { background: var(--bg-hover); border-color: var(--border); }
.rvrow.is-stale { border-color: var(--red-line); }
.rv-kind { flex: 0 0 auto; font-size: 11.5px; color: var(--text-mute); width: 62px; }
.rv-main { flex: 1; min-width: 0; }
.rv-title { font-size: 13.5px; word-break: break-word; }
.rv-meta { font-size: 11.5px; color: var(--text-mute); margin-top: 2px; }
.rv-sale { color: var(--text-dim); font-weight: 500; }
.rv-dot { opacity: .5; }
.rv-right { flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-end; gap: 3px; }
.rv-upd { font-size: 11px; color: var(--text-mute); white-space: nowrap; }

@media (max-width: 430px) {
  .so-bar { flex-wrap: wrap; }
  .so-bar .btn { width: 100%; }
  .rvrow { flex-wrap: wrap; padding: 12px; }
  .rv-kind { width: auto; }
  .rv-right { width: 100%; flex-direction: row; justify-content: space-between; align-items: center; }
}

/* ---------- F7 แหล่งงาน / Thai Water Expo (3.1) ---------- */
.srcgrid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }
.srccard { display: flex; flex-direction: column; gap: 8px; }
.src-h { display: flex; align-items: flex-start; gap: 10px; }
.src-ico { font-size: 20px; line-height: 1.2; flex: 0 0 auto; }
.src-title { flex: 1; min-width: 0; }
.src-title strong { display: block; font-size: 13.5px; line-height: 1.45; }
.src-cad { display: block; font-size: 11px; color: var(--text-mute); margin-top: 3px; }
.src-desc { font-size: 12px; color: var(--text-dim); line-height: 1.65; }
.src-owner { font-size: 11.5px; color: var(--text-mute); }
.src-subs { display: flex; flex-wrap: wrap; gap: 5px; }
.src-links { list-style: none; display: flex; flex-direction: column; gap: 5px; margin-top: 2px; }
.src-links a {
  color: var(--accent-text); text-decoration: none; font-size: 12px;
  display: inline-block; padding: 3px 0; overflow-wrap: anywhere;
}
.src-links a:hover { text-decoration: underline; }
.src-nolink, .src-badlink { font-size: 11.5px; color: var(--text-mute); }
.src-badlink { color: var(--red); }

.lnkrow { display: flex; gap: 6px; margin-bottom: 6px; align-items: center; }
.lnkrow .inp { flex: 1 1 0; min-width: 0; }

.exlist { list-style: none; margin-top: 12px; }
.exrow {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 11px 12px; margin-bottom: 6px; cursor: pointer;
  border: 1px solid var(--border-soft); border-radius: var(--r-md); background: var(--bg-panel);
}
.exrow:hover { background: var(--bg-hover); border-color: var(--border); }
.exrow.is-prospect { border-left: 3px solid var(--yellow); }
.ex-star { flex: 0 0 auto; color: var(--yellow); font-size: 14px; line-height: 1.5; }
.exrow:not(.is-prospect) .ex-star { color: var(--text-mute); }
.ex-main { flex: 1; min-width: 0; }
.ex-name { font-size: 13.5px; overflow-wrap: anywhere; }
.ex-meta { font-size: 11.5px; color: var(--text-dim); margin-top: 2px; }
.ex-contact { font-size: 11px; color: var(--text-mute); margin-top: 3px; overflow-wrap: anywhere; }
.ex-right { flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }

@media (max-width: 430px) {
  .srcgrid { grid-template-columns: 1fr; }
  .lnkrow { flex-wrap: wrap; }
  .lnkrow .inp { flex: 1 1 100%; }
  /* ⚠️ ต้องมี flex-wrap คู่กับ .ex-right{width:100%} เสมอ
     ไม่งั้นลูกกว้างเต็มบรรทัดอยู่ในแถวที่ไม่ยอมขึ้นบรรทัดใหม่ → ล้นออกนอกจอ
     (เจอตอน 3.1: ก๊อป pattern มาจาก .rvrow แต่ลืมเอา flex-wrap มาด้วย) */
  .exrow { padding: 12px; flex-wrap: wrap; }
  .ex-right { width: 100%; flex-direction: row; justify-content: space-between; align-items: center; }
}

/* ══════════════════════════════════════════════════════════
   F7 step 3.2 — ทีมขาย + playbook กลยุทธ์ + เช็กลิสต์ชนะงาน
   ⚠️ ห้าม hardcode hex ในไฟล์นี้ ใช้ var() จาก :root เท่านั้น
      ไม่งั้นตอนทำโหมดสว่าง (step 3.7) ส่วนนี้จะไม่เปลี่ยนตาม
   ══════════════════════════════════════════════════════════ */

/* 4 แถบแล้ว จอ 390px เรียงแถวเดียวไม่พอ — ต้องยอมให้ตกบรรทัด
   ถ้าไม่ใส่ แถบจะดันทะลุขอบจอแล้วหน้าเลื่อนซ้ายขวาได้ทั้งหน้า */
.segmented { flex-wrap: wrap; max-width: 100%; }

/* ---------- การ์ดทีมขาย ---------- */
.tmcard { display: flex; flex-direction: column; gap: 10px; }
.tm-h { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.tm-h strong { font-size: 14.5px; }
.tm-code {
  font-size: 10.5px; color: var(--text-mute);
  border: 1px solid var(--border); border-radius: var(--r-sm); padding: 1px 6px;
}
.tm-desc { margin: 0; font-size: 12px; color: var(--text-dim); }

.tm-nums { display: flex; gap: 8px; flex-wrap: wrap; }
.tm-nums > div { flex: 1 1 90px; min-width: 0; }
.tm-n {
  display: block; font-size: 19px; font-weight: 600;
  font-variant-numeric: tabular-nums; letter-spacing: -0.02em;
}
.tm-l { display: block; font-size: 10.5px; color: var(--text-mute); }

.tm-bar { height: 5px; border-radius: 999px; background: var(--bg-elev); overflow: hidden; }
.tm-bar > span { display: block; height: 100%; background: var(--chart-2); }

.tm-mem { display: flex; flex-wrap: wrap; gap: 5px; }
.tm-nomem { font-size: 11.5px; color: var(--text-mute); }

.tmcard.is-locked { opacity: 0.72; }
.tm-lock { margin: 0; font-size: 11.5px; color: var(--yellow); }

.warncard { border-color: var(--red-line); }
.warncard p { margin: 6px 0 0; font-size: 12px; color: var(--text-dim); }

/* ---------- เช็กลิสต์ชนะงาน 7 ข้อ ---------- */
.wincard { display: flex; flex-direction: column; gap: 10px; }
.win-h { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.win-sub { font-size: 11.5px; color: var(--text-mute); }

.winlist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.winrow {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 10px 4px; border-top: 1px solid var(--border-soft);
}
.winrow:first-child { border-top: none; }

.win-no {
  flex: 0 0 auto; width: 22px; height: 22px; border-radius: 999px;
  background: var(--bg-elev); border: 1px solid var(--border);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 11px; color: var(--text-dim); font-variant-numeric: tabular-nums;
}
/* min-width:0 กันข้อความยาวดันคอลัมน์ขวาทะลุการ์ด (บทเรียนเดียวกับ .topbar-left) */
.win-main { flex: 1 1 auto; min-width: 0; }
.win-label { font-size: 13px; }
.win-hint { font-size: 11px; color: var(--text-mute); margin-top: 2px; }

.win-bar { height: 4px; border-radius: 999px; background: var(--bg-elev); overflow: hidden; margin-top: 6px; }
.win-bar > span { display: block; height: 100%; background: var(--chart-2); }
.win-bar.tone-ok   > span { background: var(--green); }
.win-bar.tone-warn > span { background: var(--yellow); }
.win-bar.tone-bad  > span { background: var(--red); }

.win-right { flex: 0 0 auto; text-align: right; display: flex; flex-direction: column; gap: 2px; }
.win-pct { font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; }
.win-pct.tone-ok   { color: var(--green); }
.win-pct.tone-warn { color: var(--yellow); }
.win-pct.tone-bad  { color: var(--red); }
.win-miss { font-size: 10.5px; color: var(--text-mute); white-space: nowrap; }

/* ---------- การ์ด playbook ---------- */
.pbcard { display: flex; flex-direction: column; gap: 8px; }
.pblist { margin: 0; padding-left: 18px; display: flex; flex-direction: column; gap: 6px; }
.pblist li { font-size: 12.5px; color: var(--text-dim); line-height: 1.55; }
/* ลิงก์เข้าทำงานบนการ์ดกลยุทธ์ (ให้เห็นลิงก์จากหน้ากลยุทธ์ด้วย ไม่ใช่แค่แถบเส้นทาง) */
.pb-links { border-top: 1px solid var(--border-soft); padding-top: 8px; margin-top: 2px; }
.pb-links-h { display: block; font-size: 11px; color: var(--text-mute); margin-bottom: 5px; }

@media (max-width: 430px) {
  /* มือถือ: ยอมให้ "ยังขาด N งาน" ตกบรรทัดแทนที่จะดันจอ */
  .winrow { flex-wrap: wrap; }
  .win-right { flex-direction: row; align-items: baseline; gap: 8px; width: 100%; padding-left: 32px; }
  .win-miss { white-space: normal; }
}

/* ══════════════════════════════════════════════════════════
   F8 step 3.3 — แถบ PWA (ออฟไลน์ / มีเวอร์ชันใหม่ / ติดตั้งเป็นแอป)

   🔴 อยู่บนสุดของหน้าและอยู่ใน flow ปกติ — ห้ามเปลี่ยนเป็น position:fixed/sticky
      ของที่ลอยได้จะไปทับปุ่มแล้วกดไม่โดน (เจอมาแล้วตอน 3.3 ด้วยเทสต์ที่คลิกจริง)
      อยู่ใน flow = ดันเนื้อหาลงมาเอง ไม่มีทางบังอะไรได้เลย
   ══════════════════════════════════════════════════════════ */

.pwabar {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  /* บน iPhone แถบนี้เป็นของบนสุด จึงเป็นคนกันระยะรอยบากแทน .topbar
     (js/ui/pwa.js จะตั้ง --safe-t เป็น 0 ให้ส่วนที่เหลือตอนแถบโผล่ ไม่งั้นเว้นซ้ำสองที่) */
  padding: calc(12px + var(--safe-t-env)) 16px 12px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-elev);
  font-size: 12.5px;
  color: var(--text-dim);
}
.pwabar[hidden] { display: none; }

/* min-width:0 กันข้อความยาวดันปุ่มทะลุขอบ (บทเรียนเดิมจาก .topbar-left) */
.pwabar-msg { flex: 1 1 220px; min-width: 0; }
.pwabar-msg strong { color: var(--text); font-weight: 600; }
.pwabar-act { flex: 0 0 auto; display: flex; gap: 6px; }

.pwabar-warn { background: color-mix(in srgb, var(--yellow) 12%, var(--bg-elev)); border-bottom-color: var(--yellow); }
.pwabar-warn .pwabar-msg strong { color: var(--yellow); }

@media (max-width: 430px) {
  .pwabar { padding-inline: 12px; font-size: 12px; }
}

/* ── ตารางรายการสินค้าในฟอร์ม Pending (step 3.9) ── */
.fg-note { font-size: 11px; color: var(--text-mute); font-weight: normal; margin-left: 6px; }

/* ตารางกว้างกว่าจอมือถือแน่นอน → ต้องเลื่อนในกล่องตัวเอง
   ⚠️ ห้ามปล่อยให้ล้นออกมา ไม่งั้นทั้งหน้าเลื่อนซ้ายขวาได้ (กติกาเดิมของโปรเจกต์) */
.prodwrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

.prodtbl { width: 100%; min-width: 720px; border-collapse: collapse; font-size: 12px; }
.prodtbl th {
  text-align: left; font-weight: 500; font-size: 10.5px; color: var(--text-mute);
  padding: 4px 4px 6px; white-space: nowrap;
}
.prodtbl td { padding: 2px; }
.prodtbl input {
  width: 100%; min-width: 60px;
  background: var(--bg-elev); border: 1px solid var(--border);
  border-radius: var(--r-sm); color: var(--text);
  padding: 7px 8px; font-size: 12.5px; min-height: 38px;
}
.prodtbl input:focus { outline: none; border-color: var(--accent); }
.prodtbl th:nth-child(1), .prodtbl td:nth-child(1) { min-width: 150px; }
.prodtbl th:last-child,   .prodtbl td:last-child   { width: 34px; }

/* แถวมูลค่ารวมท้ายตารางสินค้า */
.prodfoot td { padding: 8px 4px 2px; border-top: 1px solid var(--border); }
.prodfoot-l { color: var(--text-dim); font-size: 12px; white-space: nowrap; }
.prodfoot-hint { color: var(--text-mute); font-size: 10.5px; font-weight: normal; }
.prodfoot-v { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.prodfoot-v b { color: var(--text); font-size: 14px; font-variant-numeric: tabular-nums; }
.prodfoot .prodfoot-v .btn { min-height: 30px; }
/* กัน .prodtbl td:last-child{width:34px} มาบีบ cell รวม (มี colspan) */
.prodfoot td:last-child { width: auto; }

@media (max-width: 430px) {
  .prodtbl input { min-height: 44px; }   /* จุดแตะบนมือถือ */
}

/* ── ช่องเพิ่มรูปลูกค้า (step 3.9+) ── */
.photofield { display: flex; gap: 14px; align-items: flex-start; }
.pf-thumb {
  flex: 0 0 84px; width: 84px; height: 84px;
  border: 1px solid var(--border); border-radius: var(--r-md);
  background: var(--bg-elev); overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.pf-thumb img { width: 100%; height: 100%; object-fit: cover; }
.pf-thumb-x { font-size: 10.5px; color: var(--text-mute); text-align: center; padding: 4px; }
.pf-actions { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }

/* ── ลายเซ็นหัวหน้า (หน้าตั้งค่าระบบ · phase 3.18) ── */
.siglist { display: flex; flex-direction: column; gap: 8px; }
.sigrow {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 8px 10px; border: 1px solid var(--border); border-radius: var(--r-md);
  background: var(--bg-elev);
}
.sig-info { flex: 1 1 160px; min-width: 140px; display: flex; flex-direction: column; gap: 2px; }
.sig-info b { font-size: 13.5px; }
.sig-role { font-size: 11px; color: var(--text-mute); }
.sig-thumb {
  flex: 0 0 150px; width: 150px; height: 52px;
  border: 1px solid var(--border); border-radius: var(--r-sm);
  background: #fff; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.sig-thumb img { max-width: 100%; max-height: 100%; object-fit: contain; }
.sig-none { font-size: 11px; color: var(--text-mute); }
.sig-actions { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.sig-size {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border);
}
.sig-size label { font-size: 12.5px; color: var(--text-dim); }
.sig-size input[type="range"] { flex: 1 1 160px; max-width: 260px; accent-color: var(--accent); }
.sig-size b { font-variant-numeric: tabular-nums; min-width: 44px; }
@media (max-width: 560px) {
  .sig-thumb { flex-basis: 100%; width: 100%; }
}
.pf-hint { flex-basis: 100%; font-size: 11px; color: var(--text-mute); margin: 0; }

/* รูปลูกค้า + นามบัตร: desktop/iPad เรียงแนวนอน (นามบัตรอยู่ขวา) · มือถือเรียงลง (นามบัตรใต้รูปบุคคล) */
.photo-card-row { display: flex; gap: 24px; align-items: flex-start; flex-wrap: wrap; }
.pc-photo { flex: 0 0 auto; }
.pc-cards { flex: 1 1 280px; min-width: 240px; }
.pf-label { font-size: 12px; font-weight: 600; color: var(--text-dim); margin-bottom: 8px; }
@media (max-width: 640px) { .photo-card-row { flex-direction: column; } .pc-cards { width: 100%; } }

/* ช่องนามบัตร 2 รูป (ด้านหน้า/ด้านหลัง) */
.cardfield { display: flex; gap: 14px; flex-wrap: wrap; }
.card-slot { flex: 1 1 150px; min-width: 140px; max-width: 240px; }
.card-slot-h { font-size: 11.5px; color: var(--text-mute); margin-bottom: 5px; }
.card-thumb {
  width: 100%; aspect-ratio: 1.75 / 1;              /* สัดส่วนนามบัตรมาตรฐาน */
  border: 1px solid var(--border); border-radius: var(--r-md);
  background: var(--bg-elev); overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.card-thumb.has-img { cursor: zoom-in; border-color: var(--border-soft); }
.card-thumb img { width: 100%; height: 100%; object-fit: cover; }
.card-slot-actions { display: flex; gap: 6px; margin-top: 6px; flex-wrap: wrap; }

/* Lightbox ดูรูปเต็มจอ + ซูม (นามบัตร) — พื้นหลังมืดคงที่เหมือน .modal (#00000099) */
body.lb-open { overflow: hidden; }
.lightbox { position: fixed; inset: 0; z-index: 9999; background: #000000ee;
  display: flex; flex-direction: column; }
.lb-bar { display: flex; align-items: center; gap: 8px; padding: 10px 14px; background: #00000066; }
.lb-title { color: #fff; font-weight: 600; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lb-sp { flex: 1; }
.lb-btn { background: #ffffff24; color: #fff; border: 0; border-radius: 8px;
  padding: 8px 13px; font: inherit; font-size: 15px; cursor: pointer; min-width: 44px; min-height: 40px; }
.lb-btn:hover { background: #ffffff3d; }
.lb-stage { flex: 1; overflow: hidden; display: flex; align-items: center; justify-content: center;
  touch-action: none; padding: 8px; }
.lb-img { max-width: 100%; max-height: 100%; transform-origin: center center;
  user-select: none; -webkit-user-drag: none; will-change: transform; }
.lb-hint { color: #ffffff99; font-size: 12px; text-align: center; padding: 6px 0 10px; }
@media (max-width: 430px) { .lb-hint { display: none; } }

/* ── Admin step 3.10: แผงสิทธิ์ดู/แก้ + ทีมย่อย + ตำแหน่ง ── */
.tmlist .is-sub { padding-left: 22px; }
.tmlist .is-sub b::before { content: "↳ "; color: var(--text-mute); }
.tmlist em { font-size: 11px; color: var(--text-mute); margin-left: 6px; font-style: normal; }

.u-name-row { display: flex; align-items: center; gap: 6px; }
.u-name { font-weight: 600; width: 100%; max-width: 200px; }
.u-title { margin-top: 4px; font-size: 11.5px; width: 100%; max-width: 200px; }

.ac-quick { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }

.aclist .ac-head {
  display: flex; align-items: center;
  font-size: 10.5px; color: var(--text-mute);
  border-bottom: 1px solid var(--border); padding-bottom: 4px; margin-bottom: 2px;
}
.acrow {
  display: flex; align-items: center; gap: 8px;
  padding: 7px 4px; border-bottom: 1px solid var(--border-soft);
}
.ac-name { flex: 1 1 auto; min-width: 0; font-size: 12.5px; }
.ac-name b { font-size: 12.5px; }
.ac-name span { color: var(--text-dim); font-size: 11.5px; }
.ac-name em { font-size: 10.5px; color: var(--green); font-style: normal; margin-left: 4px; }
.ac-col { flex: 0 0 42px; text-align: center; }
.aclist .ac-head .ac-col { flex: 0 0 42px; }
.acrow.is-sub .ac-name { padding-left: 18px; }
.acrow.is-sub .ac-name b::before { content: "↳ "; color: var(--text-mute); }
.acrow.is-own { opacity: .7; }
.acrow input[type="checkbox"] { width: 18px; height: 18px; }

/* ── Dashboard step 3.10 ช่วง B: เป้าหมายตามทีม ── */
.tt-scope { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 12px; }
.tt-scope-l { font-size: 12px; color: var(--text-mute); margin-right: 2px; }
.chip {
  font-size: 12px; padding: 5px 11px; border-radius: 999px; min-height: 32px;
  border: 1px solid var(--border); color: var(--text-dim); background: var(--bg-elev);
}
.chip:hover { color: var(--text); border-color: var(--text-mute); }
.chip.on { background: var(--accent-soft); color: var(--accent-text); border-color: transparent; }
.chip-sub { font-size: 11px; opacity: .85; }
.chip-sub b::before { content: "↳ "; }

.tt-summary { background: var(--bg-elev); border: 1px solid var(--border-soft); border-radius: var(--r-md); padding: 14px 16px; }
.tt-sum-head { font-size: 12.5px; color: var(--text-dim); margin-bottom: 10px; }
.tt-sum-head b { color: var(--text); }
.tt-sum-nums { display: flex; gap: 10px; flex-wrap: wrap; }
.tt-sum-nums > div { flex: 1 1 110px; min-width: 0; }
.tt-sum-n { display: block; font-size: 20px; font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.tt-sum-l { display: block; font-size: 10.5px; color: var(--text-mute); }

.tt-bar { height: 6px; border-radius: 999px; background: var(--bg-panel); overflow: hidden; flex: 1; min-width: 60px; }
.tt-bar > span { display: block; height: 100%; background: var(--chart-3); }
.tt-bar-lg { height: 8px; margin-top: 12px; background: var(--bg-panel); }

.tt-tbl .tt-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tt-tbl td > .tt-bar { display: inline-block; vertical-align: middle; width: 70px; margin-right: 6px; }
.tt-pct { font-size: 11.5px; color: var(--text-dim); }
.tt-name { color: var(--text-dim); font-size: 11.5px; }
.tt-tbl .tt-sub td:first-child { padding-left: 22px; }
.tt-tbl .tt-sub td:first-child b::before { content: "↳ "; color: var(--text-mute); }
.tt-tbl .tt-parent { color: var(--text-dim); }

/* ── Admin: เป้ารายทีม ── */
.ttedit { display: flex; flex-direction: column; gap: 4px; }
.ttrow { display: flex; align-items: center; gap: 10px; padding: 6px 4px; border-bottom: 1px solid var(--border-soft); }
.ttrow-name { flex: 1 1 auto; min-width: 0; font-size: 12.5px; }
.ttrow-name span { color: var(--text-dim); font-size: 11.5px; }
.ttrow-name em { font-size: 10.5px; color: var(--text-mute); font-style: normal; margin-left: 4px; }
.ttrow-inp { flex: 0 0 110px; text-align: right; }
.ttrow-val { flex: 0 0 auto; font-variant-numeric: tabular-nums; color: var(--text); font-size: 13px; font-weight: 600; min-width: 90px; text-align: right; }
.ttrow.is-sub .ttrow-name { padding-left: 18px; }

/* หน้าย่อยตั้งเป้ารายเดือน */
.tmt-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.tmt-m { display: flex; flex-direction: column; gap: 3px; }
.tmt-m span { font-size: 11px; color: var(--text-dim); }
.tmt-m .inp { text-align: right; }
.tmt-sum { margin-top: 14px; border-top: 1px solid var(--border); padding-top: 10px; display: flex; flex-direction: column; gap: 6px; }
.tmt-row { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font-size: 12px; color: var(--text-dim); }
.tmt-row b { color: var(--text); font-variant-numeric: tabular-nums; margin-right: 8px; }
.tmt-row.tmt-year { border-top: 1px dashed var(--border); padding-top: 8px; margin-top: 2px; font-size: 13px; }
.tmt-row.tmt-year b { color: var(--accent-text); font-size: 15px; }
@media (max-width: 560px) { .tmt-grid { grid-template-columns: repeat(2, 1fr); } }

/* เป้ารายคนในทีม (ในหน้าย่อยตั้งเป้าทีม) */
.st-sec { margin-top: 16px; border-top: 1px solid var(--border); padding-top: 12px; }
.strow { display: flex; align-items: center; gap: 10px; padding: 5px 2px; border-bottom: 1px solid var(--border-soft); }
.strow-name { flex: 1 1 auto; min-width: 0; font-size: 12.5px; }
.strow-val { flex: 0 0 auto; min-width: 70px; text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; color: var(--text); }
.ttrow.is-sub .ttrow-name b::before { content: "↳ "; color: var(--text-mute); }

/* ── ลืมรหัสผ่าน / ตั้งรหัสใหม่ (step 3.11) ── */
.link-btn {
  align-self: center; margin-top: 12px;
  font-size: 12.5px; color: var(--accent-text); text-decoration: underline;
  background: none; border: none; padding: 4px;
}
.link-btn:hover { color: var(--text); }
.login-ok {
  font-size: 12.5px; color: var(--green); line-height: 1.5;
  background: color-mix(in srgb, var(--green) 10%, transparent);
  border: 1px solid var(--green-line); border-radius: var(--r-sm);
  padding: 10px 12px;
}
.login-ok .t2 { color: var(--text-dim); }

/* ═══════════════════════════════════════════════════════════
   AI Intake (step 3.5) — ปุ่ม + modal นำเข้าด้วย AI
   ═══════════════════════════════════════════════════════════ */

/* ปุ่ม 🤖 AI Import — เด่นแบบ accent อ่อน ไม่แย่งสายตากับ "+ เพิ่ม" (ปุ่มหลัก) */
.btn-ai {
  background: var(--accent-soft); color: var(--accent-text);
  border-color: color-mix(in srgb, var(--accent) 40%, transparent);
}
.btn-ai:hover:not(:disabled) { background: color-mix(in srgb, var(--accent) 22%, transparent); color: var(--text); }

.ai-box { width: min(760px, 100%); }

/* พรีวิวบันทึกจาก "AI บันทึก" (openAILog) — ใช้การ์ด .ai-card ร่วมกับ AI Import */
.ai-log-preview { margin-top: 14px; border-top: 1px solid var(--border-soft); padding-top: 12px; }
.ai-log-preview .ai-card { margin-top: 8px; }

/* ⚡ Quick-log (P11) */
.ql-tabs { margin-bottom: 12px; }
.ql-search { width: 100%; margin-bottom: 10px; }
.ql-results { max-height: 46vh; overflow-y: auto; display: flex; flex-direction: column; gap: 6px; -webkit-overflow-scrolling: touch; }
.ql-item {
  display: flex; flex-direction: column; gap: 2px; text-align: left;
  padding: 10px 12px; border: 1px solid var(--border-soft); border-radius: var(--r-sm);
  background: var(--bg-elev); color: var(--text); cursor: pointer; min-height: 44px;
}
.ql-item:hover { border-color: var(--accent); background: var(--bg-hover); }
.ql-item-name { font-weight: 600; font-size: 14px; }
.ql-item-sub  { font-size: 12px; color: var(--text-mute); }
.ql-empty { color: var(--text-mute); text-align: center; padding: 20px 8px; font-size: 13px; }
.ql-newwrap { margin-top: 12px; }
.ql-newbtn { width: 100%; }
.ql-newform { border: 1px solid var(--border); border-radius: var(--r-sm); padding: 12px; display: flex; flex-direction: column; gap: 8px; }
.ql-newh { font-size: 12.5px; color: var(--text-dim); }
.ql-newfoot { display: flex; justify-content: flex-end; gap: 8px; margin-top: 4px; }

.ql-picked { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; padding-bottom: 10px; border-bottom: 1px solid var(--border-soft); }
.ql-picked-txt { display: flex; flex-direction: column; min-width: 0; line-height: 1.35; }
.ql-picked-txt strong { font-size: 15px; }
.ql-picked-txt span { font-size: 12px; color: var(--text-mute); }
.ql-back { flex: none; }
.ql-full { margin-left: auto; flex: none; font-size: 12.5px; color: var(--accent-text); text-decoration: none; white-space: nowrap; }
.ql-full:hover { text-decoration: underline; }

.ql-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 10px 0; }
.ql-chips-l { font-size: 12px; color: var(--text-mute); }
.ql-chip { font-size: 12.5px; padding: 5px 11px; min-height: 32px; border-radius: 999px; border: 1px solid var(--border); background: var(--bg-elev); color: var(--text-dim); cursor: pointer; }
.ql-chip:hover { border-color: var(--text-mute); color: var(--text); }
.ql-chip.on { background: var(--accent-soft); color: var(--accent-text); border-color: var(--accent); }

.ql-actrow { display: flex; align-items: flex-start; gap: 8px; font-size: 12.5px; color: var(--text-dim); margin: 8px 0; cursor: pointer; }
.ql-actrow input { margin-top: 2px; }
.ql-logfoot { display: flex; align-items: center; gap: 8px; margin-top: 12px; }

.ql-done { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 28px 12px; text-align: center; }
.ql-done-ic { width: 52px; height: 52px; border-radius: 999px; background: var(--accent-soft); color: var(--accent-text); display: grid; place-items: center; font-size: 26px; font-weight: 700; }
.ql-done strong { font-size: 16px; }
.ql-done span { font-size: 13px; color: var(--text-mute); }
.ql-done-foot { display: flex; gap: 8px; margin-top: 10px; }

/* จุดแตะ ≥44px บนมือถือ (เหมือน .ai-srcbtn) */
@media (max-width: 430px) { .ql-tabs button, .ql-chip { min-height: 44px; } }

/* แท็บใน modal */
.ai-tabs { display: flex; gap: 4px; padding: 8px 18px 0; border-bottom: 1px solid var(--border); }
.ai-tab {
  appearance: none; background: none; border: none; cursor: pointer;
  color: var(--text-mute); font: inherit; font-size: 13px; font-weight: 600;
  padding: 8px 12px; border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.ai-tab:hover { color: var(--text-dim); }
.ai-tab.on { color: var(--accent-text); border-bottom-color: var(--accent); }
.ai-tab .seg-badge { margin-left: 4px; }

.ai-pane { padding-top: 14px; }
.ai-step {
  font-size: 12px; font-weight: 600; color: var(--text-dim);
  margin: 14px 0 8px; letter-spacing: .01em;
}
.ai-pane .ai-step:first-child { margin-top: 4px; }

/* สลับวิธี: ฟรี (ก๊อปวางเอง) / API key (อัตโนมัติ) */
.ai-modeseg { width: 100%; }
.ai-modeseg button { flex: 1; }
.ai-mode { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; }
.ai-hint2 { margin: 0; font-size: 12px; color: var(--text-dim); line-height: 1.5; }
.ai-hint2 b { color: var(--text); }

/* เลือกแหล่ง */
.ai-src { display: flex; flex-wrap: wrap; gap: 8px; }
.ai-srcbtn {
  appearance: none; cursor: pointer; font: inherit; font-size: 13px;
  background: var(--bg-elev); color: var(--text-dim);
  border: 1px solid var(--border); border-radius: var(--r-sm); padding: 8px 12px;
}
.ai-srcbtn:hover { border-color: var(--text-mute); color: var(--text); }
.ai-srcbtn.on { background: var(--accent-soft); color: var(--accent-text); border-color: var(--accent); }

/* กล่องคำสั่งสำเร็จรูป */
.ai-prompt-wrap { position: relative; }
.ai-prompt {
  width: 100%; background: var(--bg); color: var(--text-dim);
  border: 1px solid var(--border); border-radius: var(--r-sm);
  padding: 10px 12px; font: inherit; font-size: 12.5px; line-height: 1.5;
  resize: vertical; white-space: pre; overflow-x: auto;
}
.ai-copy { position: absolute; top: 8px; right: 8px; }

.ai-paste {
  width: 100%; font-size: 13px; line-height: 1.5; resize: vertical;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* การ์ดใน staging */
.ai-card {
  background: var(--bg-panel); border: 1px solid var(--border);
  border-radius: var(--r-lg); padding: 12px 14px; margin-bottom: 12px;
}
.ai-card.ai-saved { border-color: var(--green-line); opacity: .7; transition: opacity .3s; }
.ai-card-head { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.ai-card-head .spacer { flex: 1; }
.ai-badge {
  font-size: 11px; color: var(--text-dim);
  background: var(--bg-elev); border: 1px solid var(--border-soft);
  border-radius: 999px; padding: 3px 9px;
}
.ai-dup { font-size: 12px; color: var(--yellow); }

.ai-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.ai-fld { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.ai-fld.ai-wide { grid-column: 1 / -1; }
.ai-fld > span { font-size: 12px; color: var(--text-dim); }
.ai-fld .inp { width: 100%; font-size: 16px; }
.ai-fld textarea.inp { resize: vertical; line-height: 1.5; min-height: 40px; }
/* textarea ที่โตตามเนื้อหา — โชว์ข้อความเต็มกรอบ ไม่ต้องเลื่อนในกรอบ (เจ้าของขอ 27 ก.ค. 2569) */
textarea.ai-grow { resize: none; overflow: hidden; }

/* ช่องที่ AI ไม่มั่นใจ — ไฮไลต์เหลือง (หายเมื่อคนแก้/แตะ) */
.inp.ai-low {
  border-color: var(--yellow);
  background: color-mix(in srgb, var(--yellow) 12%, var(--bg-elev));
}
.ai-low-dot { color: var(--yellow); font-size: 9px; vertical-align: middle; }
.ai-low-chip {
  color: var(--yellow); background: color-mix(in srgb, var(--yellow) 14%, transparent);
  border-radius: 4px; padding: 1px 6px; font-weight: 600;
}

.ai-more { margin-top: 10px; }
.ai-more > summary {
  cursor: pointer; font-size: 12.5px; color: var(--text-mute);
  padding: 6px 0; list-style: none;
}
.ai-more > summary:hover { color: var(--text-dim); }
.ai-more[open] > summary { margin-bottom: 8px; }

.ai-card-foot { display: flex; align-items: center; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
.ai-card-foot .spacer { flex: 1; }
.ai-mergehint { font-size: 12px; color: var(--text-mute); display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ai-mergehint b { color: var(--text-dim); }
.ai-merge-q { color: var(--yellow); }
.ai-radio { display: inline-flex; align-items: center; gap: 4px; color: var(--text-dim); cursor: pointer; }
.ai-ok { color: var(--green); font-size: 13px; font-weight: 600; }

.ai-note { font-size: 11.5px; color: var(--text-mute); }

@media (max-width: 1024px) {
  .ai-fields { grid-template-columns: 1fr; }
}
@media (max-width: 430px) {
  .ai-srcbtn, .ai-tab { min-height: 44px; }
  .ai-card-foot .btn { min-height: 44px; }
}

/* ═══════════════════════════════════════════════════════════
   ปุ่ม Success / Miss ในฟอร์ม Pending (ระบุผลได้งาน/ไม่ได้งาน)
   ═══════════════════════════════════════════════════════════ */
.resultbar {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 12px 18px;
  /* อยู่ท้าย modal-body (ไม่ pin) · เต็มความกว้าง + ชิดขอบล่าง body (หัก padding ของ body) */
  margin: 14px -18px -18px;
  border-top: 1px solid var(--border-soft);
  background: var(--bg-elev);
}
.resultbar-l { font-size: 12px; font-weight: 600; color: var(--text-dim); }
.btn-result {
  appearance: none; cursor: pointer; font: inherit; font-size: 13px; font-weight: 600;
  background: var(--bg-panel); border: 1px solid var(--border); color: var(--text-dim);
  border-radius: var(--r-sm); padding: 8px 14px; min-height: 38px;
}
.btn-win:hover  { border-color: var(--green); color: var(--green); }
.btn-miss:hover { border-color: var(--red);   color: var(--red); }
.btn-win.on  { background: var(--green); border-color: var(--green); color: var(--on-accent); }
.btn-miss.on { background: var(--red);   border-color: var(--red);   color: var(--on-accent); }
.resultbar-because { display: flex; align-items: center; gap: 6px; flex: 1 1 220px; min-width: 0; }
.resultbar-because > span { font-size: 12px; color: var(--text-mute); flex: 0 0 auto; }
.resultbar-because input {
  flex: 1 1 0; min-width: 0; background: var(--bg-panel);
  border: 1px solid var(--border); color: var(--text);
  border-radius: var(--r-sm); padding: 8px 10px; font: inherit; font-size: 16px; min-height: 38px;
}
.resultbar-because input:focus { outline: none; border-color: var(--accent); }

@media (max-width: 430px) {
  .btn-result { flex: 1 1 44%; min-height: 44px; }
  .resultbar-because { flex-basis: 100%; }
}

/* ═══════════════════════════════════════════════════════════
   สำรอง & กู้คืน (step 3.6) — หน้า Admin
   ═══════════════════════════════════════════════════════════ */
.bk-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.bk-file { cursor: pointer; margin: 0; display: inline-flex; align-items: center; }
.bk-warn {
  margin: 12px 0 0; padding: 10px 12px; font-size: 13px;
  color: var(--text); background: color-mix(in srgb, var(--red) 8%, transparent);
  border: 1px solid var(--red-line); border-radius: var(--r-sm);
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.bk-warn b { color: var(--red); }
@media (max-width: 430px) {
  .bk-actions .btn, .bk-file { flex: 1 1 100%; min-height: 44px; justify-content: center; }
}

/* ═══════════════════════════════════════════════════════════
   หน้าต่างเลือกธีม & สี (step 3.7)
   swatch แสดงตัวอย่างธีมด้วย data-theme/data-accent + var() — ไม่ hardcode hex
   ═══════════════════════════════════════════════════════════ */
#themeBtn { font-size: 15px; line-height: 1; padding: 6px 10px; }

.th-label { font-size: 12px; font-weight: 600; color: var(--text-dim); margin: 14px 0 8px; }
.modal-body > .th-label:first-child { margin-top: 4px; }

.th-themes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.th-card {
  appearance: none; cursor: pointer; font: inherit; text-align: left;
  background: var(--bg-elev); border: 1.5px solid var(--border); border-radius: var(--r-md);
  padding: 10px; display: flex; flex-direction: column; gap: 6px;
}
.th-card:hover { border-color: var(--text-mute); }
.th-card.on { border-color: var(--accent); background: var(--accent-soft); }

/* swatch = ตัวอย่างธีม (มี data-theme/data-accent → ตัวแปรข้างในเป็นของธีมนั้น) */
.th-swatch {
  height: 40px; border-radius: var(--r-sm); border: 1px solid var(--border);
  background: var(--bg); display: flex; align-items: center; gap: 5px; padding: 0 8px;
}
.th-swatch i { display: block; border-radius: 3px; }
.th-swatch .s-bg { width: 22px; height: 14px; background: var(--bg-panel); border: 1px solid var(--border); }
.th-swatch .s-ac { width: 14px; height: 14px; border-radius: 50%; background: var(--accent); }
.th-swatch .s-tx { flex: 1; height: 4px; background: var(--text); opacity: .8; }
.th-name { font-size: 13px; font-weight: 600; color: var(--text); }
.th-note { font-size: 11px; color: var(--text-mute); line-height: 1.35; }

.th-accents { display: flex; gap: 12px; flex-wrap: wrap; }
.th-dot {
  appearance: none; cursor: pointer; padding: 0; background: none;
  width: 34px; height: 34px; border-radius: 50%; border: 2px solid transparent;
  display: grid; place-items: center;
}
.th-dot i { width: 22px; height: 22px; border-radius: 50%; background: var(--accent); display: block; }
.th-dot.on { border-color: var(--text); }
.th-hint { font-size: 11.5px; color: var(--text-mute); margin-top: 14px; }

/* ── ตัวเลือกฟอนต์ (ใช้ปุ่ม .th-card ร่วมกับธีม · แทน swatch ด้วยตัวอย่างฟอนต์จริง) ── */
.th-fonts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.th-fontsample {
  height: 40px; border-radius: var(--r-sm); border: 1px solid var(--border);
  background: var(--bg); display: grid; place-items: center;
  font-size: 16px; color: var(--text); line-height: 1;
}
/* พรีวิวฟอนต์จริงในปุ่ม — font-family (ไม่ใช่สี) จึงไม่ติดกติกา "ห้าม hardcode"
   ไทย = ฟอนต์นั้น · ตัวเลข/อังกฤษ = Inter (ตรงกับพฤติกรรมจริงของ per-glyph fallback) */
.th-fontsample[data-font="inter"]   { font-family: "Inter",sans-serif; }
.th-fontsample[data-font="sarabun"] { font-family: "Sarabun","Inter",sans-serif; }
.th-fontsample[data-font="ibmplex"] { font-family: "IBM Plex Sans Thai","Inter",sans-serif; }
.th-fontsample[data-font="noto"]    { font-family: "Noto Sans Thai","Inter",sans-serif; }
.th-fontsample[data-font="system"]  { font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif; }
.th-fontsample[data-font="itim"]     { font-family: "Itim","Inter",sans-serif; }
.th-fontsample[data-font="mali"]     { font-family: "Mali","Inter",sans-serif; }
.th-fontsample[data-font="sriracha"] { font-family: "Sriracha","Inter",sans-serif; }

@media (max-width: 430px) {
  .th-themes, .th-fonts { grid-template-columns: 1fr; }
  .th-dot { width: 44px; height: 44px; }
}

/* ── AI Intake: อ่านรูปอัตโนมัติ (step 3.8) ── */
.ai-auto {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 12px 14px; margin-top: 6px;
  background: var(--accent-soft); border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
  border-radius: var(--r-md);
}
.ai-auto-l { flex: 1 1 240px; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.ai-auto-l strong { font-size: 13px; color: var(--text); }
.ai-auto-l span { font-size: 11.5px; color: var(--text-dim); line-height: 1.4; }
.ai-autobtn { cursor: pointer; margin: 0; white-space: nowrap; }
.ai-autobtn.is-loading { opacity: .7; pointer-events: none; }
.ai-or {
  display: flex; align-items: center; gap: 10px; margin: 14px 0 2px;
  font-size: 11.5px; color: var(--text-mute);
}
.ai-or::before, .ai-or::after { content: ""; flex: 1; height: 1px; background: var(--border-soft); }

/* ── กล่องเชื่อม API key ของผู้ใช้เอง (BYO key) ── */
.ai-keybox {
  margin-top: 8px; border: 1px solid var(--border-soft); border-radius: var(--r-md);
  background: var(--bg-elev);
}
.ai-keybox > summary {
  cursor: pointer; padding: 10px 12px; font-size: 12.5px; font-weight: 600; color: var(--text-dim);
  list-style: none; display: flex; align-items: center; gap: 6px;
}
.ai-keybox > summary::-webkit-details-marker { display: none; }
.ai-keybox[open] > summary { border-bottom: 1px solid var(--border-soft); }
.ai-keystate { font-weight: 400; color: var(--text-mute); }
.ai-keybody { padding: 12px; display: flex; flex-direction: column; gap: 10px; }
.ai-keynote { font-size: 11.5px; color: var(--text-dim); line-height: 1.5; margin: 0; }
.ai-keynote b { color: var(--text); }
/* ยืนยันชัด ๆ ว่าเก็บ key ไว้แล้ว (กันความรู้สึก "เหมือนไม่ยอมเซฟ") */
.ai-keysaved {
  margin: 0; font-size: 12px; color: var(--green);
  background: var(--green-line); border: 1px solid var(--green-line);
  border-radius: var(--r-sm); padding: 6px 10px;
}
.ai-keysaved b { font-variant-numeric: tabular-nums; letter-spacing: .3px; }
.ai-keyrow { display: flex; gap: 8px; flex-wrap: wrap; }
.ai-keyrow .inp { flex: 1 1 200px; min-width: 0; }
.ai-modelrow { display: flex; align-items: center; gap: 8px; }
.ai-modelrow > span { font-size: 12px; color: var(--text-dim); flex: 0 0 auto; }
.ai-modelrow .inp { flex: 1 1 auto; min-width: 0; }
.ai-keylink { font-size: 11.5px; color: var(--accent-text); }
.ai-modelnote { margin: 0; font-size: 11px; color: var(--text-mute); line-height: 1.5; }
.ai-modelnote b { color: var(--green); }

@media (max-width: 430px) {
  .ai-autobtn { flex: 1 1 100%; min-height: 44px; }
  .ai-keyrow .inp { flex: 1 1 100%; }
  .ai-keyrow .btn { flex: 1 1 44%; min-height: 44px; }
}

/* ตัวกรองเดือนถูกปิดตอนดู Archive (งานจบแล้วไม่กรองตามเดือนคาดปิด) */
.toolbar-sub.filter-off .tl-label { opacity: .4; }

/* ═══════════════════════════════════════════════════════════
   เป้ารายทีม: กล่องรวมทั้งองค์กร (step 3.11)
   ═══════════════════════════════════════════════════════════ */
.tt-total {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin-top: 10px; padding: 10px 12px;
  border-top: 1.5px solid var(--border); font-size: 13px;
}
.tt-total > span { color: var(--text-dim); }
.tt-total b { color: var(--accent-text); font-size: 15px; }

/* ═══════════════════════════════════════════════════════════
   ประวัติการเซ็นรับทราบ (timeline ใกล้กิจกรรม · step 3.11)
   ═══════════════════════════════════════════════════════════ */
.so-hist-wrap { margin: 12px 0 4px; }
.so-hist-h { font-size: 12px; font-weight: 600; color: var(--text-dim); margin-bottom: 6px; }
.so-hist { list-style: none; display: flex; flex-direction: column; gap: 6px; }
.so-hist-item {
  background: var(--accent-soft); border: 1px solid color-mix(in srgb, var(--accent) 25%, transparent);
  border-radius: var(--r-sm); overflow: hidden;
}
.so-hist-head {
  width: 100%; appearance: none; background: none; border: none; cursor: pointer;
  display: flex; align-items: center; gap: 8px; text-align: left;
  padding: 8px 10px; font: inherit; font-size: 12.5px; color: var(--text);
}
.so-hist-head[disabled] { cursor: default; }
.so-hist-ico { flex: 0 0 auto; }
.so-hist-txt { flex: 1 1 auto; min-width: 0; }
.so-hist-txt b { color: var(--accent-text); }
.so-hist-caret { flex: 0 0 auto; font-size: 11px; color: var(--accent-text); }
.so-hist-head.open .so-hist-caret::first-letter { content: ""; }
.so-hist-head.open .so-hist-caret { opacity: .6; }
.so-hist-nonote { flex: 0 0 auto; font-size: 11px; color: var(--text-mute); }
.so-hist-note {
  padding: 2px 12px 10px 30px; font-size: 12.5px; color: var(--text-dim);
  font-style: italic; line-height: 1.5;
}

/* ═══════════════════════════════════════════════════════════
   ตัวกรองทีมบน Dashboard (รวม/แยก) + การ์ดลูกค้า Book 3 สี รายทีม
   ═══════════════════════════════════════════════════════════ */
.dash-scope {
  display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
  margin-bottom: 16px; padding: 10px 12px;
  background: var(--bg-panel); border: 1px solid var(--border-soft); border-radius: var(--r-md);
}
.dash-scope-l { font-size: 12px; font-weight: 600; color: var(--text-dim); margin-right: 4px; }
/* เลือกดูเป้ารายคน → หรี่แถบเลือกทีมไว้ (สองมิติใช้ทีละอัน) */
.dash-scope.is-off { opacity: .4; pointer-events: none; }
#dashPerson { min-width: 200px; max-width: 100%; }

/* แถบเลือกทีม (Pending Project / Book 3 สี) — ใช้ .chip ร่วมกับ dashboard */
.team-scope {
  display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
  margin: 0 0 14px; padding: 8px 12px;
  background: var(--bg-panel); border: 1px solid var(--border-soft); border-radius: var(--r-md);
}
.team-scope-l { font-size: 12.5px; color: var(--text-dim); margin-right: 2px; }
.team-scope-cur { color: var(--accent); font-weight: 700; }
.team-scope-sp { flex: 1 1 8px; }
@media (max-width: 430px) { .team-scope-sp { display: none; } }

/* ดรอปดาวน์เลือกดูรายบุคคล (Pending Project / Book 3 สี) — กรองต่อจากแถบเลือกทีม */
.person-scope {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
  margin: 0 0 14px; padding: 8px 12px;
  background: var(--bg-panel); border: 1px solid var(--border-soft); border-radius: var(--r-md);
}
.person-scope-l { font-size: 12.5px; font-weight: 600; color: var(--text-dim); }
.person-scope #personScopeSel { min-width: 220px; max-width: 100%; }
.dash-scope-note {
  font-size: 12.5px; color: var(--accent-text);
  background: var(--accent-soft); border: 1px solid color-mix(in srgb, var(--accent) 25%, transparent);
  border-radius: var(--r-sm); padding: 8px 12px; margin-bottom: 14px;
}
.dash-scope-note b { color: var(--text); }

.cust-sum { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; padding: 4px 0; }
.cust-total { display: flex; flex-direction: column; }
.cust-total .cust-n { font-size: 26px; font-weight: 700; color: var(--text); line-height: 1.1; }
.cust-total .cust-l { font-size: 11.5px; color: var(--text-mute); }
.cust-c { display: flex; align-items: center; gap: 5px; font-size: 16px; }
.cust-c b { font-size: 18px; color: var(--text); }
.cust-dot { font-size: 15px; }

/* ── การ์ดลูกค้าตามประเภท DOCC (ภาพรวม · 28 ก.ค. 2569) ── */
.docc-grid { display: flex; flex-wrap: wrap; gap: 10px; padding: 2px 0; }
.docc-item {
  flex: 1 1 150px; min-width: 140px;
  display: flex; align-items: center; gap: 10px;
  background: var(--bg-elev); border: 1px solid var(--border-soft);
  border-radius: var(--r-sm); padding: 10px 12px;
}
.docc-letter {
  flex: 0 0 auto; width: 34px; height: 34px; line-height: 34px; text-align: center;
  border-radius: 50%; background: var(--accent-soft); color: var(--accent-text);
  font-weight: 700; font-size: 16px;
}
.docc-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.15; }
.docc-n { font-size: 22px; font-weight: 700; color: var(--text); }
.docc-lbl { font-size: 12px; color: var(--text-dim); }
.docc-none .docc-letter { background: var(--bg-panel); color: var(--text-mute); }

/* ══════════ ข่าวสารโอกาสงานประจำสัปดาห์ (news_reports · phase 3.14) ══════════ */
/* การ์ดข่าวการ์ดแรกในแถบแหล่งงาน — ตัวใหม่สุดไฮไลต์ "ใหม่สัปดาห์นี้" */
.newswrap { margin: 0 0 18px; }
.newscard {
  display: flex; align-items: center; gap: 14px; width: 100%; text-align: left;
  padding: 15px 18px; cursor: pointer; font: inherit; color: var(--text);
  border-radius: var(--r-md); border: 1px solid var(--border); background: var(--bg-panel);
}
.newscard:hover { border-color: var(--accent); background: var(--bg-hover); }
.newscard-hot {
  border-color: var(--accent);
  background: linear-gradient(120deg, var(--accent-soft), transparent 62%);
}
.news-ico { font-size: 26px; flex: none; }
.newscard .news-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.newscard .news-main strong { font-size: 15px; line-height: 1.4; }
.news-badge {
  align-self: flex-start; font-size: 11px; font-weight: 700;
  color: var(--accent-text); background: var(--accent-soft);
  border: 1px solid var(--accent); border-radius: 999px; padding: 1px 8px; margin-bottom: 2px;
}
.news-date { font-size: 12.5px; color: var(--text-mute); }
.news-go { flex: none; font-size: 13px; color: var(--accent-text); white-space: nowrap; }
.news-old { margin-top: 8px; display: flex; flex-direction: column; gap: 6px; }
.news-old-h { font-size: 12px; color: var(--text-mute); margin: 6px 2px 0; }
.news-oldrow {
  display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
  padding: 9px 14px; cursor: pointer; font: inherit; color: var(--text);
  border-radius: var(--r-sm); border: 1px solid var(--border-soft); background: var(--bg-panel);
}
.news-oldrow:hover { border-color: var(--accent); }
.news-oldrow .news-ico { font-size: 18px; }
.news-oldrow .news-main { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }
.news-oldrow strong { font-size: 13.5px; font-weight: 600; }
/* การ์ด + ปุ่มลบ (admin) วางข้างกัน */
.newscard-wrap { display: flex; align-items: stretch; gap: 8px; }
.newscard-wrap .newscard, .newscard-wrap .news-oldrow { flex: 1; min-width: 0; }
.newscard-wrap .nw-del { flex: none; align-self: center; }

/* หน้าต่างอ่านข่าวเต็มจอ — iframe แสดงไฟล์ HTML ทั้งหน้า */
.modal-full { padding: 0; align-items: stretch; }
.modal-full-box {
  width: 100%; max-width: 100%; height: 100vh; max-height: 100vh;
  border-radius: 0; border: none;
}
.nw-body { flex: 1; overflow: hidden; background: #fff; }
.nw-frame { width: 100%; height: 100%; border: 0; display: block; background: #fff; }
@media (max-width: 430px) {
  .modal-full .modal-head { padding-top: calc(14px + env(safe-area-inset-top, 0px)); }
}

/* รายการข่าวในหน้า Admin (เพิ่ม/ลบ) */
.nw-adminlist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.nw-adminlist li {
  display: flex; align-items: center; gap: 12px; padding: 10px 12px;
  border: 1px solid var(--border-soft); border-radius: var(--r-sm); background: var(--bg-elev);
}
.nw-ali-main { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.nw-ali-main .t2 { font-size: 12px; color: var(--text-mute); }
.nw-adminlist button, .nw-adminlist a { flex: none; }

/* สถานะสำรองขึ้น Google Drive (task 5) */
.gd-status { display: flex; gap: 28px; flex-wrap: wrap; font-size: 14px; }
.gd-status b { color: var(--text); }
.gd-l { display: block; font-size: 11.5px; color: var(--text-mute); margin-bottom: 1px; }

/* ---------- P13 · หน้า "รอบันทึก" (คิว staging) ---------- */
.prep-toolbar { align-items: center; }
.prep-spacer { flex: 1; }                          /* ดันปุ่ม "+ จดชื่อใหม่" ไปขวาสุด */
.prep-hint { font-size: 12px; color: var(--text-mute); min-height: 16px; margin: 2px 2px 10px; }

.prep-list { display: flex; flex-direction: column; gap: 10px; }
.prep-row {
  display: flex; align-items: center; gap: 14px;
  padding: 12px 14px;
  background: var(--bg-panel);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-md, 12px);
}
.prep-badge {
  flex: none; align-self: flex-start;
  font-size: 11px; font-weight: 600; white-space: nowrap;
  padding: 3px 9px; border-radius: 999px;
  border: 1px solid var(--border);
}
.prep-badge.k-cust { color: var(--amber, #d9a300); border-color: color-mix(in srgb, var(--amber, #d9a300) 45%, transparent); }
.prep-badge.k-pend { color: var(--accent-text); border-color: color-mix(in srgb, var(--accent) 45%, transparent); }
.prep-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.prep-name { font-size: 14.5px; font-weight: 600; color: var(--text); }
.prep-sub  { font-size: 12.5px; color: var(--text-dim); }
.prep-meta { font-size: 11px; color: var(--text-mute); }
.prep-actions { flex: none; display: flex; gap: 8px; }

.prep-err { color: var(--red); font-size: 12.5px; margin-top: 4px; }
.qp-add-box { max-width: 440px; width: 100%; }
.qp-add-box .modal-body { display: flex; flex-direction: column; gap: 14px; }
.qp-kind { width: 100%; }
.qp-kind button { flex: 1; padding: 9px 6px; font-size: 13px; }
.qp-note { font-size: 11.5px; color: var(--text-mute); line-height: 1.5; margin: 0; }

@media (max-width: 640px) {
  .prep-row { flex-wrap: wrap; gap: 8px 12px; }
  .prep-actions { width: 100%; }
  .prep-actions .btn { flex: 1; }
}