/* css/material-catalog.css — ย้ายมาจาก pages/shared-pages.css (2026-08-16)
   ตอนรวม Material Catalog เข้ามาเป็นแท็บใน contistant.html
   กฎที่ shell มีอยู่แล้ว (:root, .fp-*, .rh-table, .ov-table, .modal-*) ถูกตัดทิ้ง
   ไม่ได้ย้ายมา — ดู tests/css-no-shell-collision.test.js */

/* .mc-mono ไม่ใช่ของ shell (ไม่มีใน css/*.css เลย) — js/catalog/material-catalog.js
   ใช้จริง (ตัวเลขคอลัมน์ราคา) เดิมอยู่รวมกับ .ov-num/td.ov-num/.ov-kpi-value ใน
   shared-pages.css บรรทัด 31 ซึ่งสามส่วนหลังซ้ำกับของ shell/ไม่ถูกใช้ในหน้านี้เลย
   (ดูรายละเอียดใน css/boq-summary.css) ประกาศซ้ำที่นี่ด้วยเพราะทั้งสองไฟล์ใช้จริง
   และ test เช็คแค่การชนกับ shell ไม่เช็คระหว่างสองไฟล์นี้เอง */
.mc-mono { font-family: 'IBM Plex Mono', 'JetBrains Mono', monospace; }

/* ─── ส่วนต่างจาก shell ที่ตรวจพบและต้องคงไว้ (ดู task-3-report.md สำหรับรายละเอียด) ─── */

/* .ov-table th/td ของ shell (feature-panels.css) ไม่มี vertical-align:middle
   (shared-pages.css เดิมมี) และไม่มี th.ov-num เลย (มีแต่ td.ov-num) — แต่ Material
   Catalog ใช้ <th class="ov-num"> จริง (material-catalog.js:1414) จึงต้องเติมกลับ
   scope ไว้ใต้ #panel-catalog */
#panel-catalog .ov-table th, #panel-catalog .ov-table td { vertical-align: middle; }
#panel-catalog .ov-table th.ov-num { text-align: right; font-variant-numeric: tabular-nums; }

/* .rh-delete ของ shell (feature-panels.css) เป็นปุ่มเปล่า ๆ ไม่มี padding/รูปทรง/
   hover background — shared-pages.css เดิมทำเป็นปุ่มไอคอนวงกลม (ใช้กับปุ่มลบ
   ที่มี ICONS.trash ข้างใน ใน material-catalog.js) ถ้าตัดทิ้งไปเฉย ๆ ปุ่มลบราคา/
   ลบชุดประวัติราคาจะไม่มี padding และไม่มี hover background เติมกลับ scope ไว้ใต้
   #panel-catalog (BOQ Summary ไม่ได้ใช้ .rh-delete เลย ไม่ต้องเติมที่นั่น) */
#panel-catalog .rh-delete {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 6px; border-radius: 6px; transition: background-color 0.15s ease, color 0.15s ease;
}
#panel-catalog .rh-delete:hover { background: #fee2e2; }

/* .modal-card ของ shell (feature-panels.css) สไตล์ input/select เท่านั้น ไม่มี
   textarea เลย — Material Catalog มี <textarea id="mc-input-notes"> ในโมดัลแก้ไข
   ราคา (material-catalog.js:1689) ถ้าตัดทิ้งไปเฉย ๆ ช่องนี้จะไม่มีสไตล์อะไรเลย
   เติมกลับทั้งฟอนต์/padding (จาก .modal-card input,select เดิม) และ
   min-height/resize scope ไว้ใต้ #panel-catalog */
#panel-catalog .modal-card textarea {
  font-family: inherit; font-size: 13px; padding: 8px 10px; border: 1px solid var(--color-border-default); border-radius: 6px; color: var(--color-text-primary);
  min-height: 56px; resize: vertical;
}

/* ─── Material Price Selector: catalog-source badge + trigger to open the selector ─── */
.price-change-trigger {
  display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px; margin-left: 4px;
  color: var(--color-text-secondary); font-size: 11px; line-height: 1;
  border-radius: 4px; cursor: pointer; user-select: none;
}
.price-change-trigger:hover { color: var(--color-primary); background: var(--color-surface-row); }

/* Mirrors the "ราคากลาง" / "ของฉัน" pill badges in material-catalog.js's renderPriceRow() */
.catalog-source-badge {
  display: inline-block; flex-shrink: 0; font-size: 11px; font-weight: 600;
  padding: 2px 8px; border-radius: 999px; white-space: nowrap;
}
.catalog-source-badge--admin { background: #1f6feb; color: #fff; }
.catalog-source-badge--mine { background: #e5e7eb; color: #111; }

/* ─── Material Catalog specific ─── */

/* Page header: icon badge + title/subtitle, replaces the old inline emoji glyph */
.mc-page-header { display: flex; align-items: center; gap: 14px; }
.mc-page-icon {
  flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 10px;
  background: color-mix(in srgb, var(--color-primary) 12%, transparent);
  color: var(--color-primary);
}
.mc-demo-note { color: #b45309; font-weight: 600; }
.mc-debug-toggle { margin-top: 8px; }

/* Buttons with a leading SVG icon (material-catalog.js's ICONS.* inline SVGs inside
   fp-btn-primary/secondary buttons). feature-panels.css's own .fp-btn-primary/.fp-btn-secondary
   (background/color/border/padding) don't set display/gap/svg-sizing at all — this is a
   genuine addition, not a redefinition of those properties, but the SELECTOR TEXT is
   identical (a bare .fp-btn-primary/.fp-btn-secondary rule), so it still trips the
   collision test and, worse, would apply this layout tweak to every fp-btn-primary/
   secondary button app-wide, not just Material Catalog's icon buttons. Scoped under
   #panel-catalog. BOQ Summary's own fp-btn-primary/secondary buttons carry emoji text,
   not <svg>, so they don't need this. */
#panel-catalog .fp-btn-primary, #panel-catalog .fp-btn-secondary { display: inline-flex; align-items: center; gap: 6px; transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease; }
#panel-catalog .fp-btn-primary svg, #panel-catalog .fp-btn-secondary svg { flex-shrink: 0; }
.mc-btn-danger { color: #dc2626; border-color: #fca5a5; }
.mc-btn-danger:hover { background: #fee2e2; }
.mc-clear-filters-btn { width: 100%; justify-content: center; }

.mc-sidebar-title { display: flex; align-items: center; gap: 8px; }
.mc-sidebar-title svg { color: var(--color-text-secondary); }

/* Row-count pill next to a table's <h2> title */
.mc-count-badge {
  display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 20px;
  padding: 0 6px; margin-left: 6px; border-radius: 999px; background: var(--color-surface-row);
  color: var(--color-text-secondary); font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums;
  vertical-align: middle;
}

/* Sortable column headers */
.mc-th-sort { cursor: pointer; user-select: none; white-space: nowrap; }
.mc-th-sort-inner { display: inline-flex; align-items: center; gap: 4px; }
.mc-th-icon { flex-shrink: 0; opacity: 0.45; transition: opacity 0.15s ease, color 0.15s ease; }
.mc-th-sort:hover { color: var(--color-text-primary); }
.mc-th-sort:hover .mc-th-icon { opacity: 0.85; }
.mc-th-sort--active { color: var(--color-primary); }
.mc-th-sort--active .mc-th-icon { opacity: 1; color: var(--color-primary); }
.mc-th-sort:focus { outline: none; }
.mc-th-sort:focus-visible { outline: 2px solid var(--color-primary); outline-offset: -2px; border-radius: 3px; }

/* Row hover highlight for scannability on dense tables */
.mc-table tbody tr:hover { background: var(--color-surface-row); }

.mc-tabs { display: flex; gap: 6px; border-bottom: 1px solid var(--color-border-default); }
.mc-tab {
  background: none; border: none; cursor: pointer; padding: 10px 16px;
  font-size: 13px; font-weight: 700; color: var(--color-text-secondary);
  border-bottom: 2px solid transparent; font-family: inherit;
}
.mc-tab.active { color: var(--color-primary); border-bottom-color: var(--color-primary); }
.mc-tab:hover { color: var(--color-text-primary); }
.mc-tab:focus { outline: none; }
.mc-tab:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }

.mc-layout { display: grid; grid-template-columns: 240px 1fr; gap: 16px; align-items: start; }
.mc-admin-panel { display: block; }
.mc-sidebar { display: flex; flex-direction: column; gap: 12px; position: sticky; top: 16px; }
.mc-filter-group { display: flex; flex-direction: column; gap: 6px; }
.mc-filter-label { font-size: 12px; color: var(--color-text-secondary); font-weight: 700; }
.mc-checkbox { display: flex; align-items: center; gap: 6px; font-size: 13px; cursor: pointer; }
.mc-sidebar select, .mc-sidebar input[type="text"] {
  font-family: inherit; font-size: 13px; padding: 8px 10px; border: 1px solid var(--color-border-default); border-radius: 6px;
}

.mc-table-toolbar { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px; margin-bottom: 12px; }
.mc-toolbar-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.mc-table-scroll { overflow-x: auto; }
.mc-table { font-size: 12px; }
.mc-col-name { min-width: 220px; }
.mc-inline-input {
  font-family: 'IBM Plex Mono', 'JetBrains Mono', monospace; font-size: 12px; padding: 4px 6px;
  border: 1px solid var(--color-border-default); border-radius: 4px; width: 100%; max-width: 120px;
}
.mc-col-price { min-width: 170px; width: 170px; white-space: nowrap; }
.mc-col-date { width: 110px; min-width: 110px; white-space: nowrap; }
.mc-col-supplier { min-width: 170px; }
.mc-col-actions { width: 170px; min-width: 170px; }
.mc-price-cell { display: flex; align-items: center; justify-content: flex-end; gap: 6px; }
.mc-inline-input--price {
  min-width: 108px; max-width: none; width: 108px; flex-shrink: 0;
  font-size: 13px; padding: 5px 8px; text-align: right;
}
.mc-actions { display: flex; gap: 6px; white-space: nowrap; align-items: center; justify-content: flex-end; }
.mc-actions-row { display: inline-flex; gap: 6px; align-items: center; justify-content: flex-end; min-height: 42px; height: 100%; }
.mc-actions button, .mc-actions .rh-delete { min-height: 34px; margin: 0; display: inline-flex; align-items: center; justify-content: center; }

td.mc-actions { display: table-cell; vertical-align: middle !important; text-align: right; white-space: nowrap; }

#panel-catalog .ov-table td input[type="date"], #panel-catalog .ov-table td input[type="number"] {
  min-width: 110px;
}

.mc-catalog-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; }
.mc-catalog-card { display: flex; flex-direction: column; gap: 6px; }
.mc-catalog-icon { font-size: 32px; }
.mc-catalog-card h3 { margin: 0; font-size: 15px; }
.mc-catalog-provider { margin: 0; font-size: 12px; font-weight: 700; color: var(--color-primary); }
.mc-catalog-desc { margin: 0; font-size: 12px; color: var(--color-text-secondary); flex-grow: 1; }
.mc-catalog-meta { display: flex; justify-content: space-between; font-size: 11px; color: var(--color-text-disabled); margin-bottom: 4px; }

.mc-csv-modal { width: 720px; }
.mc-csv-preview-wrap { max-height: 320px; overflow: auto; margin-bottom: 12px; }
.mc-chart-wrap { margin-bottom: 16px; }
.mc-chart-wrap canvas { max-height: 260px; }

.mc-history-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.mc-history-filterbar {
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: 14px;
  padding: 12px 14px; margin-bottom: 12px; background: var(--color-surface-row); border-radius: 8px;
}
.mc-history-filterbar select, .mc-history-filterbar input[type="date"] {
  font-family: inherit; font-size: 13px; padding: 7px 10px; border: 1px solid var(--color-border-default); border-radius: 6px;
}
.mc-history-daterange { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--color-text-secondary); }
.mc-history-filter-actions { display: flex; gap: 8px; margin-left: auto; }

.mc-history-batches { margin-top: 20px; }
.mc-history-batches h3 { font-size: 14px; margin: 0 0 10px; }
.mc-history-batch-row {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: 10px 14px; border: 1px solid var(--color-border-default); border-radius: 8px; margin-bottom: 8px;
}
.mc-history-batch-info { display: flex; gap: 14px; align-items: baseline; font-size: 13px; }
.mc-history-batch-date { font-weight: 600; }
.mc-history-batch-count { color: var(--color-text-secondary); font-size: 12px; }
.mc-manage-data-modal { width: 620px; }

/* ─── Searchable Material combobox (Price History tab) ─── */
.mc-combobox { position: relative; min-width: 220px; }
.mc-combobox-input {
  width: 100%; box-sizing: border-box; padding-right: 28px !important;
  font-family: inherit; font-size: 13px; padding: 7px 10px; border: 1px solid var(--color-border-default); border-radius: 6px;
}
.mc-combobox-clear {
  position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  border: none; background: none; cursor: pointer; color: var(--color-text-secondary);
  font-size: 12px; padding: 4px 6px; line-height: 1; border-radius: 4px;
}
.mc-combobox-clear:hover { color: var(--color-text-primary); background: var(--color-surface-row); }
.mc-combobox-list {
  position: absolute; z-index: 40; top: calc(100% + 4px); left: 0; min-width: 260px; width: max-content; max-width: 420px;
  max-height: 280px; overflow-y: auto; margin: 0; padding: 4px; list-style: none;
  background: #fff; border: 1px solid var(--color-border-default); border-radius: 8px;
  box-shadow: 0 10px 28px rgba(0,0,0,0.14);
}
.mc-combobox-option { padding: 7px 10px; font-size: 13px; border-radius: 6px; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mc-combobox-option:hover, .mc-combobox-option--active { background: var(--color-surface-row); }
.mc-combobox-option--all { font-weight: 700; color: var(--color-primary); border-bottom: 1px solid var(--color-border-default); border-radius: 0; margin-bottom: 4px; padding-bottom: 9px; }
.mc-combobox-empty { padding: 10px; font-size: 12px; color: var(--color-text-secondary); text-align: center; white-space: normal; }

/* ─── Table trend badges (⬆/⬇ vs. chronologically previous price for same material) ─── */
.mc-col-trend { width: 90px; min-width: 90px; white-space: nowrap; }
.mc-trend {
  display: inline-flex; align-items: center; gap: 3px; padding: 2px 7px; border-radius: 10px;
  font-size: 11px; font-weight: 700; font-family: 'IBM Plex Mono', 'JetBrains Mono', monospace; white-space: nowrap;
}
.mc-trend--up { background: #fee2e2; color: #dc2626; }
.mc-trend--down { background: #dcfce7; color: #16a34a; }
.mc-trend--flat { background: #f3f4f6; color: #9ca3af; }

/* ─── Client-side pagination (Price History table) ─── */
.mc-pagination { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 14px; flex-wrap: wrap; }
.mc-pagination button {
  min-width: 32px; height: 32px; padding: 0 8px; border: 1px solid var(--color-border-default); border-radius: 6px;
  background: #fff; cursor: pointer; font-family: 'IBM Plex Mono', 'JetBrains Mono', monospace; font-size: 12px; font-weight: 600;
}
.mc-pagination button:hover:not(:disabled) { background: var(--color-surface-row); }
.mc-pagination button.active { background: var(--color-primary); color: var(--color-on-primary); border-color: var(--color-primary); }
.mc-pagination button:disabled { opacity: 0.4; cursor: not-allowed; }
.mc-pagination-ellipsis { padding: 0 4px; color: var(--color-text-disabled); }
.mc-pagination-info { font-size: 12px; color: var(--color-text-secondary); margin-right: 8px; }

/* ─── Chart.js custom external tooltip (price / date / colored % change) ─── */
.mc-chart-tooltip {
  position: absolute; pointer-events: none; opacity: 0; transition: opacity 0.1s ease;
  background: rgba(17, 24, 39, 0.95); color: #fff; padding: 8px 12px; border-radius: 8px;
  font-size: 12px; line-height: 1.6; z-index: 1200; transform: translate(-50%, -110%);
  box-shadow: 0 6px 16px rgba(0,0,0,0.25); white-space: nowrap;
}
.mc-tt-date { font-weight: 700; margin-bottom: 2px; }
.mc-tt-price { font-family: 'IBM Plex Mono', 'JetBrains Mono', monospace; }
.mc-tt-change { margin-top: 2px; }
.mc-tt-pct { font-weight: 700; }
.mc-tt-pct--up { color: #f87171; }
.mc-tt-pct--down { color: #4ade80; }
.mc-tt-pct--neutral { color: #9ca3af; }

/* ─── Print stylesheet (browser Ctrl+P on this panel) ─── the original combined
   rule (shared-pages.css 431-438) also hid .pg-topbar (dead chrome, dropped) and
   .boq-export-controls (BOQ-owned, its own print rule lives in boq-summary.css)
   and reset bare `.fp-card`/`body` — both shell-owned selector TEXT (feature-panels.css
   has its own .fp-card, shell.css has its own body), so a bare rule here would
   both trip the collision test and, for real, apply this print-only reset to every
   .fp-card / to <body> app-wide on print, not just this panel. Scoped under
   #panel-catalog instead — same visual effect for this panel's printed output,
   without touching shell-owned selectors at all. */
@media print {
  .mc-tabs, .mc-sidebar, .mc-toolbar-actions { display: none !important; }
  #panel-catalog { background: #fff; }
  #panel-catalog .fp-card { border: none; box-shadow: none; padding: 0; margin-bottom: 12px; }
}

/* ─── Material Catalog v2 browse tab ─── */
.mc-v2-layout { display: grid; grid-template-columns: 240px 1fr; gap: 16px; align-items: start; min-width: 0; }
.mc-v2-facets { display: flex; flex-direction: column; gap: 16px; position: sticky; top: 16px; max-height: calc(100vh - 32px); overflow-y: auto; padding-right: 2px; }
.mc-v2-facet-title { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: var(--color-text-secondary); margin-bottom: 6px; }
.mc-v2-chip-list { display: flex; flex-wrap: wrap; gap: 6px; }
.mc-v2-facet-toggle { display: block; margin-top: 6px; border: none; background: none; padding: 0; color: var(--color-primary); font-size: 11.5px; font-weight: 600; cursor: pointer; font-family: inherit; }
.mc-v2-chip { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--color-border-default); background: #fff; cursor: pointer; padding: 6px 11px; border-radius: 999px; font-size: 12.5px; font-weight: 600; font-family: inherit; }
.mc-v2-chip--active { border-color: var(--color-primary); color: var(--color-primary); background: color-mix(in srgb, var(--color-primary) 8%, transparent); }
.mc-v2-chip-count { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--color-surface-row); font-size: 10.5px; font-weight: 700; }
.mc-v2-quickfilter { display: flex; gap: 8px; margin-bottom: 10px; }
.mc-v2-quickfilter .mc-v2-chip { padding: 8px 16px; font-size: 13px; }
.mc-v2-controls-row { display: flex; gap: 10px; margin-bottom: 12px; align-items: center; flex-wrap: wrap; }
.mc-v2-search { flex: 1; min-width: 220px; max-width: 360px; padding: 8px 12px; border-radius: 8px; border: 1px solid var(--color-border-default); font: inherit; font-size: 13px; color: var(--color-text-primary); }
.mc-v2-search:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 15%, transparent); }
.mc-v2-sort { padding: 8px 30px 8px 12px; border-radius: 8px; border: 1px solid var(--color-border-default); font: inherit; font-size: 13px; background: #fff; cursor: pointer; color: var(--color-text-primary); }
.mc-v2-sort:focus { outline: none; border-color: var(--color-primary); }
.mc-v2-result-count { font-size: 14px; font-weight: 700; padding: 6px 4px 14px; }
.mc-v2-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 14px; }
.mc-v2-card { background: #fff; border: 1px solid var(--color-border-default); border-radius: 10px; padding: 14px 16px; display: flex; flex-direction: column; gap: 8px; }
.mc-v2-card-head { display: flex; align-items: center; justify-content: space-between; }
.mc-v2-type-icon { display: inline-flex; padding: 4px; border-radius: 6px; color: var(--color-primary); background: color-mix(in srgb, var(--color-primary) 10%, transparent); }
.mc-v2-type-icon--plain { cursor: default; color: var(--color-text-secondary); background: var(--color-surface-row); }
.mc-v2-key { font-family: 'IBM Plex Mono', monospace; font-size: 10.5px; color: var(--color-text-disabled); }
.mc-v2-card-label { font-size: 13.5px; font-weight: 600; display: flex; align-items: baseline; gap: 8px; }
.mc-v2-card-unit { font-size: 11px; font-weight: 600; color: var(--color-text-secondary); font-family: 'IBM Plex Mono', monospace; white-space: nowrap; }
.mc-v2-brand-row { display: flex; gap: 4px; }
.mc-v2-brand-badge { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; color: #fff; font-size: 10px; font-weight: 700; }
.mc-v2-obs-row { display: flex; align-items: center; gap: 8px; padding: 5px 8px; border-radius: 6px; background: var(--color-surface-row); font-size: 12px; }
.mc-v2-obs-row--best { background: color-mix(in srgb, var(--color-primary) 6%, transparent); }
.mc-v2-obs-source { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mc-v2-obs-price { font-weight: 700; font-family: 'IBM Plex Mono', monospace; }
.mc-v2-obs-unit { font-weight: 500; color: var(--color-text-secondary); }
.mc-v2-tier { font-size: 9.5px; font-weight: 700; padding: 2px 6px; border-radius: 4px; }
.mc-v2-tier--official { background: #d1fae5; color: #065f46; }
.mc-v2-tier--reference { background: #cffafe; color: #155e75; }
.mc-v2-tier--retail { background: #fef3c7; color: #92400e; }
.mc-v2-tier--manual { background: #f3f4f6; color: #374151; }
.mc-v2-recommend { display: flex; align-items: center; justify-content: space-between; padding: 6px 8px; border-radius: 6px; border: 1px dashed var(--color-border-default); font-size: 11.5px; }
.mc-v2-recommend strong { color: var(--color-primary); font-family: 'IBM Plex Mono', monospace; }

/* ─── Material Catalog v2 basket drawer ─── */
.mc-v2-basket-btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 8px; border: 1px solid var(--color-border-default); background: #fff; cursor: pointer; font-weight: 600; margin-bottom: 10px; }
.mc-v2-drawer { position: fixed; top: 0; right: 0; width: 320px; height: 100vh; background: #fff; border-left: 1px solid var(--color-border-default); box-shadow: -4px 0 16px rgba(0,0,0,0.08); padding: 16px; z-index: 50; display: flex; flex-direction: column; gap: 10px; overflow-y: auto; }
.mc-v2-drawer-head { display: flex; align-items: center; justify-content: space-between; }
.mc-v2-drawer-item { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 12.5px; padding: 6px 0; border-bottom: 1px solid var(--color-surface-row); }
.mc-v2-add-basket { border: 1px solid var(--color-border-default); background: #fff; border-radius: 4px; width: 20px; height: 20px; cursor: pointer; line-height: 1; }

/* ─── Material Catalog v2 presets panel ─── */
.mc-v2-drawer--presets { right: 340px; }
.mc-v2-preset-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 0; border-bottom: 1px solid var(--color-surface-row); }
.mc-v2-preset-row--active { background: color-mix(in srgb, var(--color-primary) 6%, transparent); }
.mc-v2-preset-name { font-weight: 600; font-size: 12.5px; }
.mc-v2-preset-meta { font-size: 10.5px; color: var(--color-text-secondary); }
.mc-v2-preset-actions { display: flex; gap: 6px; }
.mc-v2-preset-actions button { font-size: 11px; border: 1px solid var(--color-border-default); background: #fff; border-radius: 4px; padding: 4px 8px; cursor: pointer; }

/* ─── TPSO Price History Explorer (Material Catalog "ราคาตลาด TPSO" tab) ─── */
#panel-catalog .panel-head { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
#panel-catalog .panel-head h2 { font-size: 18px; margin: 0; }
#panel-catalog .muted { color: var(--color-text-secondary); font-size: 12.5px; }
.tpso-picker { display: flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 600; margin: 14px 0; }
.tpso-picker select { font-family: inherit; font-size: 13px; padding: 6px 10px; border: 1px solid var(--color-border-default); border-radius: 4px; background: #fff; }
.tpso-rawname { font-size: 13px; font-weight: 600; margin: 0 0 6px; }
.tpso-spec { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 10px; }
.tpso-chip { font-size: 11px; background: var(--color-surface-row); border: 1px solid var(--color-border-default); border-radius: 999px; padding: 2px 10px; }
.tpso-chip--family { font-weight: 700; background: color-mix(in srgb, var(--color-primary) 10%, transparent); }
.tpso-chip--tail { color: #b45309; }
.tpso-chart { width: 100%; height: auto; color: var(--color-primary); }
.mc-tpso-badge { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700; color: #0f766e; }
.mc-tpso-history-btn { font-size: 10.5px; border: 1px solid var(--color-border-default); background: #fff; border-radius: 999px; padding: 2px 8px; cursor: pointer; color: var(--color-text-secondary); }
.mc-tpso-history-btn:hover { color: var(--color-primary); border-color: var(--color-primary); }

/* ── 2026-08-19 BOQ+Catalog finalization (spec 2026-08-19) ── */

/* debug session ปุ่มเดิมใหญ่เกิน — เหลือลิงก์ตัวเล็ก ไม่แย่งสายตาจากงานจริง */
.mc-debug-link { background: none; border: none; color: #94a3b8; font-size: 11px; text-decoration: underline; cursor: pointer; padding: 0; }
.mc-debug-link:hover { color: #475569; }

/* ระยะจากไซต์บนแถว observation ของผู้จำหน่าย */
.mc-v2-obs-dist { margin-left: 6px; font-size: 11px; color: #0e7490; background: #ecfeff; border-radius: 8px; padding: 1px 6px; white-space: nowrap; }

/* ── coverage panel ในตะกร้า ── */
.mc-v2-cov-progress { display: flex; flex-direction: column; gap: 6px; }
.mc-v2-cov-label { font-size: 13px; color: #334155; }
.mc-v2-cov-bar { height: 8px; border-radius: 6px; background: #e2e8f0; overflow: hidden; }
.mc-v2-cov-fill { height: 100%; border-radius: 6px; background: var(--color-primary, #2066DF); transition: width .35s ease; }
.mc-v2-cov-fill.is-complete { background: #16a34a; }
.mc-v2-cov-row { display: flex; align-items: flex-start; gap: 8px; padding: 8px; border: 1px solid var(--color-border-default, #e2e8f0); border-radius: 8px; background: #fff; text-align: left; width: 100%; }
.mc-v2-cov-row.is-covered { border-color: #bbf7d0; background: #f0fdf4; }
.mc-v2-cov-row.is-missing { cursor: pointer; border-style: dashed; }
.mc-v2-cov-row.is-missing:hover { border-color: var(--color-primary, #2066DF); background: #f8fafc; }
.mc-v2-cov-tick { flex: 0 0 auto; font-size: 13px; line-height: 1.4; color: #16a34a; }
.mc-v2-cov-row.is-missing .mc-v2-cov-tick { color: #94a3b8; }
.mc-v2-cov-main { flex: 1 1 auto; min-width: 0; }
.mc-v2-cov-name { font-size: 12.5px; color: #0f172a; }
.mc-v2-cov-by { font-size: 11.5px; color: #475569; margin-top: 2px; }
.mc-v2-cov-missing-hint { color: #b45309; }
.mc-v2-cov-remove { background: none; border: none; color: #94a3b8; font-size: 11px; text-decoration: underline; cursor: pointer; padding: 0 0 0 6px; }
.mc-v2-cov-remove:hover { color: #dc2626; }
.mc-v2-cov-extras-title { font-size: 11.5px; color: #64748b; margin-top: 6px; border-top: 1px dashed #e2e8f0; padding-top: 8px; }
.mc-v2-save-complete { background: #16a34a; border-color: #16a34a; }
.mc-v2-save-complete:hover { background: #15803d; }
.mc-v2-cov-ok { color: #16a34a; font-size: 13px; }
.mc-v2-cov-warn { color: #b45309; font-size: 13px; }

/* ── save-preset modal ── */
.mc-v2-save-modal { max-width: 440px; }
.mc-v2-save-modal label { display: flex; flex-direction: column; gap: 6px; font-size: 13px; margin: 10px 0 4px; }
.mc-v2-save-modal input { padding: 8px 10px; border: 1px solid var(--color-border-default, #cbd5e1); border-radius: 8px; font-size: 14px; }

/* ── toast ── */
.mc-v2-toast { position: fixed; bottom: 28px; left: 50%; transform: translate(-50%, 12px); background: #0f172a; color: #f8fafc; padding: 10px 16px; border-radius: 10px; font-size: 13.5px; box-shadow: 0 8px 24px rgba(0,0,0,.25); z-index: 200; opacity: 0; transition: opacity .3s ease, transform .3s ease; display: flex; align-items: center; gap: 10px; max-width: 640px; }
.mc-v2-toast.is-visible { opacity: 1; transform: translate(-50%, 0); }
.mc-v2-toast-btn { background: var(--color-primary, #2066DF); color: #fff; border: none; border-radius: 8px; padding: 5px 10px; font-size: 12.5px; cursor: pointer; white-space: nowrap; }
.mc-v2-toast-btn:hover { filter: brightness(1.1); }
@media (prefers-reduced-motion: reduce) { .mc-v2-toast, .mc-v2-cov-fill { transition: none; } }

/* ── full-width (spec §5): แคตตาล็อกเลิกใช้ cap 960px แบบเดียวกับ Planner ── */
#panel-catalog { align-items: stretch !important; }
#panel-catalog .app-panel { width: 100%; max-width: none; }
/* rail กว้างขึ้นเล็กน้อยเมื่อจอกว้าง — การ์ดใช้พื้นที่ที่เหลือ (auto-fill เพิ่มคอลัมน์เอง) */
#panel-catalog .mc-v2-layout { grid-template-columns: 280px 1fr; }

/* ── supplier edit modal (msa-modal-card) ── the shared .modal-card is a fixed 560px,
   which was already tight for the 10-field form and now clips/h-scrolls the 3-col grid
   with the 4 freight delivery-policy fields (free radius / min order / per-km / offloading
   fee, material-pricing-boq-dev) added on top — widen this one modal rather than the
   shared .modal-card (used by other panels that don't need the extra room). */
.msa-modal-card { width: 640px; max-width: 94vw; }