/* Overview — in-place widget dashboard (redesigned 2026-08-25, mockup v2)
   ports design/mockups/overview-inplace-layout-mockup.html's <style> block under
   .ovw-/#overview-app-scoped class names (see task-4 brief for the exact rename table).
   ① หน่วยแถวคงที่ 60px + type scale ล็อกกัน  ② โหมดจัดหน้า in-place (ลาก/ปรับขนาดในกล่องเดิม)
   ③ container queries — กล่องกว้างขึ้น → เนื้อหา/ตัวหนังสือโตตาม + list แตกคอลัมน์
   ทุก selector ขึ้นต้นด้วย .ovw- หรือ #overview-app เพื่อไม่ชนกับ shell (tests/css-no-shell-collision) */

/* moodboard TONAL DEPTH scale — canvas → tone → surface + shadow, no borders
   (design/handoff/moodboard-motion-manifesto.dc.html)
   Declared on :root, not #overview-app: the widget-settings/layout dialogs and the piece-detail
   popover are deliberately appended to document.body (so a full ov_render() innerHTML rewrite
   can't destroy an open dialog — see overview-editor.js/overview-widgets.js), which puts them
   outside #overview-app's subtree. A custom property scoped to #overview-app would silently
   fail to resolve there (found and fixed live — .ovw-piece-pop rendered with no background/
   shadow at all until this moved to :root). Harmless globally: no selector outside this file
   references --ovw-*. */
:root {
  --ovw-canvas: #FAFAF9;
  --ovw-tone: #F4F4F2;
  --ovw-surface: #FFFFFF;
  --ovw-ink: #191C24;
  --ovw-ink-2: #565B68;
  --ovw-ink-3: #9A9EA9;
  --ovw-accent: #2066DF;
  --ovw-accent-hover: #1B58C4;
  --ovw-accent-press: #16418F;
  --ovw-accent-tint: #EDF3FE;
  --ovw-good: #12A150;
  --ovw-warn: #DB8A00;
  --ovw-bad: #E5484D;
  --ovw-shadow-sm: 0 1px 2px rgba(16,24,40,.04), 0 8px 24px -12px rgba(16,24,40,.08);
  --ovw-shadow-hover: 0 2px 4px rgba(16,24,40,.05), 0 16px 36px -12px rgba(16,24,40,.14);
  --ovw-shadow-float: 0 12px 32px -8px rgba(16,24,40,.18), 0 4px 12px rgba(16,24,40,.06), 0 0 0 1px rgba(16,24,40,.04);
}

/* .app-panel (shared wrapper, css/feature-panels.css) caps content at max-width:960px —
   same trap Planner/Plan View already document there. Overview's whole redesign point is a
   wide multi-column grid, so it must opt out the same way they did. */
#overview-app {
  max-width: none;
  padding: 22px 26px 40px;
  background: var(--ovw-canvas);
  color: var(--ovw-ink);
  border: none;
  border-radius: 16px;
  height: fit-content;
  --ovw-row-unit: 60px;
  --ovw-gap: 16px;
}

@keyframes ovwFadeUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
@keyframes ovwFlash { 0% { background: var(--ovw-accent-tint); } 100% { background: transparent; } }

.ovw-topbar { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 20px; }
.ovw-topbar__name { font-family: 'Anuphan', system-ui, sans-serif; font-size: 19px; font-weight: 700; letter-spacing: -.01em; }
.ovw-topbar__meta { font-size: 11.5px; color: var(--ovw-ink-3); }
.ovw-editbtn { background: none; border: 0; color: var(--ovw-accent); font-weight: 600; font-size: 12px; cursor: pointer; font-family: inherit; }
.ovw-editbtn:hover { text-decoration: underline; }

/* ── กริด 6 คอลัมน์ + หน่วยแถวคงที่ (หน่วยแถวเดียวกันทุก widget → สัดส่วนล็อกกัน) ── */
.ovw-grid { display: grid; grid-template-columns: repeat(6, 1fr);
            grid-auto-rows: var(--ovw-row-unit); grid-auto-flow: dense; gap: var(--ovw-gap); }

/* ── กล่อง widget: ลอยเป็นการ์ด surface จริง (moodboard TONAL DEPTH, ไม่ใช่ hairline แบน)
      เข้าฉากด้วย stagger fade-up (motion vocabulary: "Lists / cards" — 350ms · 40ms/ใบ)
      โหมดจัดหน้า = กรอบเส้นประเป็นที่จับลาก/ยืด (ข้อยกเว้นที่ moodboard อนุญาต — dashed border
      เฉพาะ true drag target เท่านั้น) ── */
.ovw-w { background: var(--ovw-surface); border: none; border-radius: 16px;
         padding: 18px 20px; min-width: 0; position: relative; overflow: hidden;
         display: flex; flex-direction: column; container-type: inline-size;
         box-shadow: var(--ovw-shadow-sm);
         transition: transform .12s ease, box-shadow .12s ease;
         animation: ovwFadeUp .35s cubic-bezier(.2,.8,.2,1) both;
         animation-delay: calc(var(--i, 0) * 40ms); }
.ovw-w:hover { transform: translateY(-2px); box-shadow: var(--ovw-shadow-hover); }
.ovw-w.ovw-flash { animation: ovwFadeUp .35s cubic-bezier(.2,.8,.2,1) both, ovwFlash .8s ease-out; }
#overview-app.ovw-editing .ovw-w { border: 1px dashed #B9C6E4; border-radius: 12px; box-shadow: none; animation: none; }
#overview-app.ovw-editing .ovw-w:hover { transform: none; }
#overview-app.ovw-editing .ovw-w__body { opacity: .45; pointer-events: none; }

.ovw-w__head { display: flex; align-items: center; gap: 9px; margin-bottom: 9px; flex: none; }
.ovw-w__icon { flex: none; width: 22px; height: 22px; border-radius: 6px; display: grid; place-content: center; }
.ovw-w__icon svg { width: 13px; height: 13px; stroke: currentColor; fill: none;
                   stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.ovw-w__title { font-size: 13.5px; font-weight: 700; letter-spacing: -.005em; color: var(--ovw-ink);
                overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ovw-w__grp { flex: none; font-size: 10px; font-weight: 600; color: var(--ovw-ink-3); }
.ovw-w__acts { margin-left: auto; display: flex; gap: 4px; flex: none; }
.ovw-w__body { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow-y: auto; }
/* EVM cells still address the plain label style directly */
.ovw-w__label { font-size: 10.5px; letter-spacing: .11em; text-transform: uppercase;
                color: var(--ovw-ink-3); font-weight: 600; margin-bottom: 11px; }

.ovw-w__grip { display: none; cursor: grab; color: var(--ovw-ink-3); font-size: 14px; user-select: none; touch-action: none; }
#overview-app.ovw-editing .ovw-w__grip { display: block; }
#overview-app.ovw-editing .ovw-w__grip:active { cursor: grabbing; }
.ovw-w__gear, .ovw-w__hide { display: none; }
#overview-app.ovw-editing .ovw-w__gear, #overview-app.ovw-editing .ovw-w__hide { display: inline-block; }

.ovw-w[data-dragging="true"] { opacity: .35; }
.ovw-w.ovw-dropline-l::before, .ovw-w.ovw-dropline-r::after {
  content: ''; position: absolute; top: 8px; bottom: 8px; width: 3px; border-radius: 2px; background: var(--ovw-accent); }
.ovw-w.ovw-dropline-l::before { left: -9px; }
.ovw-w.ovw-dropline-r::after { right: -9px; }

/* มือจับปรับขนาด (มุมล่างขวา) */
.ovw-w__resize { display: none; position: absolute; right: 2px; bottom: 2px; width: 18px; height: 18px;
                 cursor: nwse-resize; color: #B9C6E4; touch-action: none; }
#overview-app.ovw-editing .ovw-w__resize { display: block; }
.ovw-w__resize::after { content: ''; position: absolute; right: 4px; bottom: 4px; width: 8px; height: 8px;
                        border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; border-radius: 1px; }
.ovw-w[data-resizing="true"] { outline: 2px solid var(--ovw-accent); outline-offset: -1px; }
.ovw-sizetag { position: absolute; right: 8px; bottom: 8px; background: #10182B; color: #fff;
               font-size: 10.5px; padding: 2px 7px; border-radius: 4px; display: none; pointer-events: none; }
.ovw-w[data-resizing="true"] .ovw-sizetag { display: block; }

/* small green "ใหม่" tag — a widget added to a preset after the user last customized it */
.ovw-new { font-size: 10px; font-weight: 700; color: #027A48; background: #D1FADF;
           padding: 1px 5px; border-radius: 3px; }

/* ── container queries — กล่องกว้างขึ้น → เนื้อหา/ตัวหนังสือโตตาม + list แตกคอลัมน์ ── */
@container (min-width: 560px) {
  .ovw-w__title { font-size: 13.5px; }
  .ovw-w__icon { width: 24px; height: 24px; }
  .ovw-w__icon svg { width: 14px; height: 14px; }
  .ovw-big { font-size: 34px; }
  .ovw-mid { font-size: 17px; }
  .ovw-kv, .ovw-row { font-size: 13.5px; }
  .ovw-list { columns: 2; column-gap: 30px; }
}
@container (min-width: 980px) {
  .ovw-big { font-size: 44px; }
  .ovw-list { columns: 3; }
}
.ovw-list > * { break-inside: avoid; }
.ovw-list--dense .ovw-row { padding: 4px 0; }

/* ตัวเลข (kept — widgets already address these) */
.ovw-big { font-size: 31px; font-weight: 600; letter-spacing: -.028em; line-height: 1;
           font-family: 'JetBrains Mono', ui-monospace, monospace; font-variant-numeric: tabular-nums; }
.ovw-mid { font-size: 16px; font-weight: 600; letter-spacing: -.01em; }
.ovw-sub { font-size: 11.5px; color: var(--ovw-ink-2); margin-top: 6px; line-height: 1.5; }
.ovw-num { font-family: 'JetBrains Mono', ui-monospace, monospace; font-variant-numeric: tabular-nums; }

/* แถวรายการ (kept) */
.ovw-row { display: flex; align-items: center; gap: 9px; padding: 6.5px 0;
           border-bottom: 1px solid #F4F6F8; font-size: 12.5px; }
.ovw-row:last-child { border-bottom: 0; }
.ovw-row__name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ovw-row__why { flex: none; font-size: 11px; color: var(--ovw-ink-3); }
.ovw-row__why--warn { color: var(--ovw-bad); font-weight: 600; }
.ovw-row__when { flex: none; font-size: 10.5px; color: var(--ovw-ink-3); }
.ovw-tick { width: 3px; height: 15px; border-radius: 2px; flex: none; }
.ovw-kv { display: flex; justify-content: space-between; padding: 6.5px 0;
          border-bottom: 1px solid #F4F6F8; font-size: 12.5px; }
.ovw-kv:last-child { border-bottom: 0; }
.ovw-kv .ovw-u { font-size: 11px; color: #98A2B3; margin-left: 4px; }

.ovw-legend { justify-content: center; }

/* สถานะว่าง — บรรทัดเดียว ไม่ใช่กล่องสูงๆ (kept) */
.ovw-empty { font-size: 12px; color: #98A2B3; padding: 2px 0 4px; }
.ovw-empty a { color: var(--ovw-accent); font-weight: 600; text-decoration: none; }
.ovw-blank { grid-column: 1 / -1; text-align: center; padding: 80px 0; color: #98A2B3; font-size: 13px; }

/* กราฟ (kept) */
.ovw-chart { position: relative; height: 200px; }
.ovw-chart canvas { max-height: 200px; }

/* ตาราง (kept) */
.ovw-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.ovw-table th { text-align: left; font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase;
                color: #98A2B3; font-weight: 600; padding: 0 10px 7px 0; border-bottom: 1px solid #EDF0F4; }
.ovw-table td { padding: 6.5px 10px 6.5px 0; border-bottom: 1px solid #F4F6F8; }
.ovw-table .ovw-n { text-align: right; font-family: 'JetBrains Mono', ui-monospace, monospace;
                    font-variant-numeric: tabular-nums; }

/* ── popover รายละเอียดชิ้นส่วน (คลิกชิ้นส่วนในภาพอาคาร) — เข้าฉากแบบเดียวกับ .ovw-dlg
      (scale .96→1 + translateY(-6→0) + fade, motion vocabulary: popover/dropdown/menu) ── */
.ovw-piece-pop {
  position: fixed; z-index: 60; width: 280px; max-width: calc(100vw - 24px);
  background: var(--ovw-surface); border-radius: 14px; box-shadow: var(--ovw-shadow-float);
  opacity: 0; transform: scale(.96) translateY(-6px);
  transition: opacity .12s cubic-bezier(.2,.8,.2,1), transform .12s cubic-bezier(.2,.8,.2,1);
}
.ovw-piece-pop.is-open { opacity: 1; transform: scale(1) translateY(0); }
.ovw-piece-pop__head { display: flex; align-items: center; gap: 8px; padding: 12px 12px 10px 14px; }
.ovw-piece-pop__dot { width: 8px; height: 8px; border-radius: 99px; flex: none; }
.ovw-piece-pop__title { font-size: 13px; font-weight: 700; color: var(--ovw-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ovw-piece-pop__x { margin-left: auto; border: none; background: none; font-size: 13px; cursor: pointer; color: var(--ovw-ink-3); flex: none; padding: 2px; }
.ovw-piece-pop__x:hover { color: var(--ovw-ink); }
.ovw-piece-pop__body { padding: 0 14px 10px; }
.ovw-piece-pop__stages { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.ovw-piece-pop__stage { font-size: 10.5px; font-weight: 600; padding: 2px 8px; border-radius: 999px; background: var(--ovw-tone); color: var(--ovw-ink-2); }
.ovw-piece-pop__stage--done { background: #E9F6EE; color: #12805C; }
.ovw-piece-pop__stage--active { background: #FDF3E3; color: #B54708; }
.ovw-piece-pop__foot { padding: 10px 14px 14px; }
.ovw-piece-pop__foot .ovw-btn { width: 100%; justify-content: center; }

/* ── "โหมดโมเดลเต็ม" — ปุ่มบนภาพนิ่ง isometric เปิด overlay เต็มจอที่ mount โมเดล 3 มิติจริง
      ตัวเดียวกับ Planner (js/overview/overview-3d-modal.js) ── */
.ovw-stage__full {
  position: absolute; right: 10px; bottom: 10px; z-index: 2;
  font-family: inherit; font-size: 11px; font-weight: 600; color: #E3E9F4;
  background: rgba(16,24,40,.55); border: 1px solid rgba(255,255,255,.18); border-radius: 999px;
  padding: 5px 12px; cursor: pointer; backdrop-filter: blur(4px);
  transition: background .12s ease, transform .12s ease;
}
.ovw-stage__full:hover { background: rgba(32,102,223,.75); transform: translateY(-1px); }

/* overlay เต็มจอ — fade เข้า (motion vocabulary เดียวกับ popover อื่นในหน้านี้ แค่ scope ใหญ่กว่า) */
.ovw-fullmodel {
  position: fixed; inset: 0; z-index: 400; background: var(--ovw-ink, #191C24);
  display: flex; flex-direction: column;
  opacity: 0; transition: opacity .18s cubic-bezier(.2,.8,.2,1);
}
.ovw-fullmodel.is-open { opacity: 1; }
.ovw-fullmodel__bar { flex: none; display: flex; align-items: center; gap: 12px; padding: 14px 20px; color: #fff; }
.ovw-fullmodel__bar strong { flex: 1; font-size: 14px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ovw-fullmodel__x {
  flex: none; width: 32px; height: 32px; border-radius: 8px; border: none;
  background: rgba(255,255,255,.08); color: #fff; font-size: 15px; cursor: pointer;
  transition: background .12s ease;
}
.ovw-fullmodel__x:hover { background: rgba(255,255,255,.16); }
.ovw-fullmodel__body { flex: 1; min-height: 0; padding: 0 20px 20px; overflow: hidden; }
.ovw-fullmodel__body canvas { display: block; width: 100%; height: auto; cursor: grab; }
.ovw-fullmodel__body canvas:active { cursor: grabbing; }
.ovw-fullmodel__note { flex: none; padding: 0 20px 16px; font-size: 11px; color: #98A2B3; font-style: italic; }

@media (prefers-reduced-motion: reduce) {
  .ovw-fullmodel, .ovw-stage__full { transition: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  .ovw-piece-pop { transition: none !important; }
}

/* ── เวทีอาคาร 3D isometric ── */
.ovw-stage { flex: 1; background: #0B1220; border-radius: 6px; display: flex; align-items: center;
             justify-content: center; min-height: 0; overflow: hidden; position: relative; cursor: pointer; }
.ovw-stage:hover { outline: 2px solid #2066DF33; }
.ovw-stage svg { height: 92%; width: auto; max-width: 96%; }
/* .ovw-stage__canvas — host div for structure-showcase-3d.js's <canvas> (thumbnail mode).
   width:100%/height:auto on the canvas itself (not the host) matches the same convention
   .st3-viewport uses — lets the renderer's own aspect ratio (computed from measured width)
   decide the displayed height instead of being stretched to fill the host's flex-box height. */
.ovw-stage__canvas { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; }
.ovw-stage__canvas canvas { display: block; width: 100%; height: auto; }
.ovw-stage-cap { display: flex; align-items: center; gap: 14px; font-size: 11px; color: #5E696E;
                 margin-top: 8px; flex: none; flex-wrap: wrap; }
.ovw-stage-cap__dot { display: inline-block; width: 9px; height: 9px; border-radius: 2px; margin-right: 5px; vertical-align: -1px; }
.ovw-stage-cap__hint { margin-left: auto; color: #98A2B3; font-style: italic; }
.ovw-stage__badge { position: absolute; top: 8px; right: 10px; font-size: 10px; color: #8FA3C8;
                    background: #172037; border: 1px solid #263354; padding: 2px 8px; border-radius: 999px; }

/* ── สภาพอากาศ (คอลัมน์รายเดือน — ของจริงเรนเดอร์ 12 เดือน ไม่ใช่ 7 วัน)
      แท่งสูงขึ้นจาก 0 ตอนแรกวาด (motion vocabulary: "Progress bar / ring" — 700ms) ── */
.ovw-wx { display: flex; gap: 6px; flex: 1; align-items: stretch; min-height: 0; margin-top: 2px; }
.ovw-wx__d { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px; min-width: 0; }
.ovw-wx__col { flex: 1; width: 100%; max-width: 26px; background: var(--ovw-tone); border-radius: 3px;
               position: relative; overflow: hidden; }
.ovw-wx__col i { position: absolute; bottom: 0; left: 0; right: 0; height: 0; background: var(--ovw-accent);
                 border-radius: 3px 3px 0 0; transition: height .7s cubic-bezier(.25,1,.3,1); }
.ovw-wx__col i.ovw-wx--hi { background: var(--ovw-bad); }
.ovw-wx__lb { font-size: 10px; color: var(--ovw-ink-2); }
.ovw-wx__n { font-size: 10px; color: var(--ovw-ink-3); }
.ovw-wx__d--now .ovw-wx__lb { color: var(--ovw-accent); font-weight: 700; }

/* ── บันทึกหน้างาน ── */
.ovw-notein { display: flex; gap: 8px; margin-top: auto; padding-top: 8px; flex: none; }
.ovw-notein input { flex: 1; font: inherit; font-size: 12px; padding: 6px 10px; border: 1px solid #D0D5DD; border-radius: 6px; min-width: 0; }
.ovw-notein input:focus { outline: 2px solid var(--ovw-accent); outline-offset: -1px; }

/* ── สรุปตัวเลขแถวเดียว (progress SPI/CPI ฯลฯ) ── */
.ovw-statline { display: flex; gap: 18px; margin-top: 10px; }
.ovw-statline > div { font-size: 11px; color: #5E696E; }
.ovw-statline b { display: block; font-size: 14px; color: #1C1F21; }

/* ── ป้ายสถานะงวดงาน ── */
.ovw-mschip { font-size: 10px; font-weight: 700; padding: 1px 8px; border-radius: 999px; flex: none; }
.ovw-mschip--paid { background: #D1FADF; color: #027A48; }
.ovw-mschip--due  { background: #FEF0C7; color: #B54708; }
.ovw-mschip--wait { background: #EFF4FF; color: var(--ovw-accent); }

/* ── ลิงก์โทรศัพท์ผู้ขาย ── */
.ovw-tel { color: var(--ovw-accent); font-weight: 600; text-decoration: none; font-size: 11.5px; flex: none;
           transition: color .12s ease; }
.ovw-tel:hover { color: var(--ovw-accent-press); text-decoration: underline; }

/* ── แถบความคืบหน้า — เติมจาก 0 ไปค่าจริงตอนแรกวาด (motion vocabulary: "Progress bar / ring") ── */
.ovw-bar { height: 7px; background: var(--ovw-tone); border-radius: 99px; overflow: hidden; margin-top: 8px; }
.ovw-bar i { display: block; height: 100%; width: 0; background: var(--ovw-accent); border-radius: 99px;
             transition: width .7s cubic-bezier(.25,1,.3,1); }

/* mini progress bar ในลิสต์ (เช่น this-week) — ใช้ data-fill รูปแบบเดียวกับ .ovw-bar i */
.ovw-minibar-track { height: 3px; background: var(--ovw-tone); border-radius: 2px; margin-top: 4px; overflow: hidden; }
.ovw-minibar-fill { display: block; height: 100%; width: 0; border-radius: 2px; background: var(--ovw-warn);
                     transition: width .7s cubic-bezier(.25,1,.3,1); }

/* ── แถบเครื่องมือโหมดจัดหน้า (โผล่เมื่อ editing เท่านั้น — หน้าเดิม ไม่เปลี่ยนหน้า) ── */
.ovw-editbar2 {
  display: none; position: sticky; top: 12px; z-index: 30;
  align-items: center; gap: 10px;
  background: #10182Bee; color: #fff; border-radius: 8px;
  padding: 9px 14px; margin-bottom: 16px;
  backdrop-filter: blur(4px);
}
#overview-app.ovw-editing .ovw-editbar2 { display: flex; }
.ovw-editbar2__hint { font-size: 12px; color: #B8C4D9; }
.ovw-editbar2__spacer { flex: 1; }
.ovw-editbar2 .ovw-btn { border-color: #3B4763; background: transparent; color: #E3E9F4; }
.ovw-editbar2 .ovw-btn:hover { background: #223052; }
.ovw-editbar2 .ovw-btn--primary { background: var(--ovw-accent); border-color: var(--ovw-accent); color: #fff; }
.ovw-editbar2 .ovw-btn--primary:hover { background: var(--ovw-accent-hover); }

/* ── ปุ่ม / badge / chip / tray ที่มีอยู่แล้ว (kept — ตัวจัดหน้าและ widget ยังใช้) ── */
.ovw-btn { font-family: inherit; font-size: 12px; font-weight: 600; padding: 7px 14px;
           border-radius: 9px; border: none; background: var(--ovw-surface); color: var(--ovw-ink-2); cursor: pointer;
           box-shadow: var(--ovw-shadow-sm); transition: transform .12s ease, box-shadow .12s ease, background .12s ease, color .12s ease; }
.ovw-btn:hover { background: var(--ovw-tone); color: var(--ovw-ink); transform: translateY(-1px); }
.ovw-btn--primary { background: var(--ovw-accent); border-color: var(--ovw-accent); color: #fff;
                     box-shadow: 0 4px 14px -4px rgba(32,102,223,.55); }
.ovw-btn--primary:hover { background: var(--ovw-accent-hover); box-shadow: 0 8px 20px -6px rgba(32,102,223,.6); }
.ovw-badge { font-size: 11px; font-weight: 600; color: #B54708; background: #FEF0C7;
             padding: 2px 8px; border-radius: 4px; }

.ovw-iconbtn { border: 1px solid #EAECF0; background: #fff; border-radius: 4px; cursor: pointer;
               font-size: 11px; line-height: 1; padding: 3px 6px; color: #475467; font-family: inherit; }
.ovw-iconbtn:hover:not(:disabled) { background: #F2F4F7; }
.ovw-iconbtn:disabled { opacity: .35; cursor: default; }

.ovw-seg { display: inline-flex; border: 1px solid #EAECF0; border-radius: 4px; overflow: hidden; }
.ovw-seg button { border: 0; background: #fff; font-size: 10.5px; padding: 3px 7px; cursor: pointer;
                  color: #667085; font-family: inherit; }
.ovw-seg button[aria-pressed="true"] { background: var(--ovw-accent); color: #fff; font-weight: 600; }

.ovw-tray { margin-top: 26px; border-top: 1px solid #EDF0F4; padding-top: 16px; }
.ovw-tray__group { margin-bottom: 14px; }
.ovw-tray__chips { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 7px; }
.ovw-chip { border: 1px dashed #D0D5DD; background: #fff; border-radius: 999px; padding: 4px 12px;
            font-size: 12px; cursor: pointer; color: #344054; font-family: inherit; }
.ovw-chip:hover { border-color: var(--ovw-accent); color: var(--ovw-accent); }

/* ── popup ตั้งค่ากล่อง / ตั้งค่าเลย์เอาต์รวม ──
   .ovw-dlg เป็น class บน <dialog> เอง (ไม่ใช่ตัวเลือก element เปล่า) — dialog อยู่นอก #overview-app
   ในโครง DOM แต่ selector ยังขึ้นต้นด้วย .ovw- ตามกติกา guard test */
/* เข้าฉากด้วย scale .96→1 + translateY(-6→0) + fade (motion vocabulary: "Popover / dropdown / menu"
   — 180ms out · 120ms in). .is-open ถูกเติมโดย ove_openWidgetDialog/ove_openLayoutDialog ในเฟรมถัดจาก
   showModal() — ต้องรอเฟรมนั้นก่อน ไม่งั้น browser รวม state เริ่มต้นกับ state เปิดเป็น paint เดียว */
/* dialog อยู่นอก #overview-app ใน DOM (appendChild ไปที่ document.body) — custom properties ที่
   ประกาศไว้บน #overview-app จึงไปไม่ถึงที่นี่ ต้องประกาศชุดที่ .ovw-dlg ต้องใช้ซ้ำอีกรอบตรงนี้ */
.ovw-dlg {
  --ovw-ink: #191C24; --ovw-ink-2: #565B68; --ovw-ink-3: #9A9EA9;
  --ovw-tone: #F4F4F2; --ovw-surface: #FFFFFF;
  --ovw-accent: #2066DF; --ovw-accent-hover: #1B58C4; --ovw-accent-press: #16418F;
  --ovw-shadow-sm: 0 1px 2px rgba(16,24,40,.04), 0 8px 24px -12px rgba(16,24,40,.08);
  --ovw-shadow-float: 0 12px 32px -8px rgba(16,24,40,.18), 0 4px 12px rgba(16,24,40,.06), 0 0 0 1px rgba(16,24,40,.04);
  margin: auto; /* mockup ไม่มี * { margin:0 } แต่ยังคงไว้เป็นเอกสารอ้างอิงพฤติกรรมเดิม */
  border: none; border-radius: 14px; padding: 0;
  width: 480px; max-width: 92vw; z-index: 50;
  box-shadow: var(--ovw-shadow-float);
  opacity: 0; transform: scale(.96) translateY(-6px);
  transition: opacity .12s cubic-bezier(.2,.8,.2,1), transform .12s cubic-bezier(.2,.8,.2,1);
}
.ovw-dlg.is-open { opacity: 1; transform: scale(1) translateY(0); }
.ovw-dlg::backdrop { background: rgba(16,24,43,.32); opacity: 0; transition: opacity .12s ease; }
.ovw-dlg.is-open::backdrop { opacity: 1; }
.ovw-dlg__head { display: flex; align-items: center; padding: 14px 18px; border-bottom: 1px solid #E4E7EC; }
.ovw-dlg__head h2 { font-size: 14px; font-weight: 700; }
.ovw-dlg__x { margin-left: auto; border: 0; background: none; font-size: 16px; cursor: pointer; color: #98A2B3; }
.ovw-dlg__body { padding: 16px 18px; display: grid; gap: 14px; font-size: 12.5px; max-height: 66vh; overflow-y: auto; }
.ovw-dlg__foot { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 18px; border-top: 1px solid #E4E7EC; }

.ovw-field label { display: block; font-size: 11px; font-weight: 700; letter-spacing: .06em;
               text-transform: uppercase; color: #98A2B3; margin-bottom: 6px; }
.ovw-field input[type=text], .ovw-field select, .ovw-field textarea {
  width: 100%; font: inherit; padding: 7px 10px; border: 1px solid #D0D5DD; border-radius: 6px;
}
.ovw-field input:focus, .ovw-field select:focus, .ovw-field textarea:focus { outline: 2px solid var(--ovw-accent); outline-offset: -1px; }
/* label.ovw-checkrow ต้องชนะ .ovw-field label (display:block + ตัวพิมพ์เล็ก) ด้วย specificity สูงกว่า */
.ovw-field label.ovw-checkrow { display: flex; align-items: center; gap: 9px; padding: 6px 0;
  border-bottom: 1px solid #F1F3F6; font-size: 12.5px; font-weight: 500;
  letter-spacing: normal; text-transform: none; color: #1C1F21; margin-bottom: 0; }
.ovw-field label.ovw-checkrow:last-child { border-bottom: 0; }
.ovw-checkrow__grp { margin-left: auto; font-size: 10.5px; color: #98A2B3; }
.ovw-srcnote { background: #F1F3F6; border-radius: 6px; padding: 9px 12px; font-size: 11.5px; color: #5E696E; line-height: 1.6; }

.ovw-dlgl-presetacts { display: flex; gap: 8px; align-items: center; margin-top: 8px; flex-wrap: wrap; }

/* countUp()/animateFillAttrs() (js/shared/count-up.js) already check matchMedia themselves and
   skip straight to the final value — this covers the CSS-only motion (card entrance/hover/flash,
   dialog entrance, bar/column transitions) that has no JS branch of its own. */
@media (prefers-reduced-motion: reduce) {
  .ovw-w, .ovw-w:hover, .ovw-w.ovw-flash,
  .ovw-bar i, .ovw-minibar-fill, .ovw-wx__col i,
  .ovw-dlg, .ovw-dlg::backdrop, .ovw-btn, .ovw-tel {
    animation: none !important;
    transition: none !important;
  }
  .ovw-w:hover { transform: none; }
  .ovw-dlg.is-open { opacity: 1; transform: none; }
}