/* ==========================================================================
   Procurement & Inventory Management System
   Design System - Corporate / Enterprise
   ========================================================================== */

:root {
  /* Color Tokens */
  --color-bg: #f4f6f9;
  --color-surface: #ffffff;
  --color-surface-alt: #fafbfc;
  --color-border: #e3e8ef;
  --color-border-strong: #cbd5e1;

  --color-text: #0f172a;
  --color-text-secondary: #475569;
  --color-text-muted: #94a3b8;

  --color-primary: #1e3a5f;
  --color-primary-hover: #16294a;
  --color-primary-soft: #e8eef5;

  --color-accent: #2563eb;
  --color-accent-soft: #dbeafe;

  --color-success: #16a34a;
  --color-success-soft: #dcfce7;
  --color-warning: #d97706;
  --color-warning-soft: #fef3c7;
  --color-danger: #dc2626;
  --color-danger-soft: #fee2e2;
  --color-info: #0891b2;
  --color-info-soft: #cffafe;

  /* Spacing */
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 10px;

  /* Shadow */
  --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow-md: 0 1px 3px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow-lg: 0 4px 12px rgba(15, 23, 42, 0.08);
}

/* Reset & Base
   ========================================================================== */
* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  font-family: 'Sarabun', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  /* Fluid font: 13.5px (notebook ~1280) → 14px (1440) → 15px (1920+) */
  font-size: clamp(13.5px, 0.6vw + 11.8px, 15px);
  line-height: 1.5;
  color: var(--color-text);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--color-accent); text-decoration: none; }
a:hover { text-decoration: underline; }

/* Layout
   ========================================================================== */
.app-shell {
  display: grid;
  grid-template-columns: 240px 1fr;
  min-height: 100vh;
}

/* Sidebar */
.sidebar {
  background: var(--color-primary);
  color: #cbd5e1;
  padding: 0;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
}

.sidebar-brand {
  padding: 20px 22px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  display: flex;
  align-items: center;
  gap: 10px;
}

.sidebar-brand .logo-mark {
  width: 32px; height: 32px;
  background: var(--color-accent);
  border-radius: var(--radius-md);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; color: #fff; font-size: 14px;
  letter-spacing: 0.5px;
}

.sidebar-brand .brand-text {
  color: #fff;
  font-weight: 600;
  font-size: 14px;
  line-height: 1.3;
}

.sidebar-brand .brand-text small {
  display: block;
  color: #94a3b8;
  font-weight: 400;
  font-size: 11px;
  letter-spacing: 0.3px;
}

.sidebar-section {
  padding: 16px 0 8px;
  border-bottom: 1px solid rgba(255,255,255,0.05);
}

.sidebar-section-title {
  padding: 0 22px 8px;
  font-size: 11px;
  font-weight: 600;
  color: #64748b;
  letter-spacing: 0.8px;
  text-transform: uppercase;
}

.sidebar-nav { list-style: none; }

.sidebar-nav a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 22px;
  color: #cbd5e1;
  font-size: 13.5px;
  border-left: 3px solid transparent;
  transition: background 0.15s, color 0.15s;
}

.sidebar-nav a:hover {
  background: rgba(255,255,255,0.04);
  color: #fff;
  text-decoration: none;
}

.sidebar-nav a.active {
  background: rgba(37, 99, 235, 0.15);
  color: #fff;
  border-left-color: var(--color-accent);
}

.sidebar-nav .icon {
  width: 16px; height: 16px;
  flex-shrink: 0;
  opacity: 0.85;
}

.sidebar-footer {
  padding: 14px 22px;
  border-top: 1px solid rgba(255,255,255,0.08);
  font-size: 11px;
  color: #64748b;
}

/* Main */
.main-area {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.topbar {
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  padding: 12px 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: sticky;
  top: 0;
  z-index: 10;
}

.topbar-left {
  display: flex;
  align-items: center;
  gap: 16px;
}

.page-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--color-text);
}

.breadcrumb {
  font-size: 12px;
  color: var(--color-text-muted);
}

.breadcrumb a { color: var(--color-text-secondary); }

.topbar-right {
  display: flex;
  align-items: center;
  gap: 16px;
}

.search-box {
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--color-surface-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 6px 10px;
  min-width: 240px;
}

.search-box input {
  border: none;
  background: transparent;
  outline: none;
  font-family: inherit;
  font-size: 13px;
  width: 100%;
  color: var(--color-text);
}

.icon-btn {
  background: transparent;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  width: 34px; height: 34px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  color: var(--color-text-secondary);
  position: relative;
}

.icon-btn .badge-dot {
  position: absolute;
  top: 6px; right: 6px;
  width: 7px; height: 7px;
  background: var(--color-danger);
  border-radius: 50%;
  border: 1.5px solid var(--color-surface);
}

.user-chip {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 10px 4px 4px;
  border: 1px solid var(--color-border);
  border-radius: 30px;
  cursor: pointer;
}

.avatar {
  width: 28px; height: 28px;
  background: var(--color-primary);
  color: #fff;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 600;
}

.user-chip .user-name {
  font-size: 13px;
  font-weight: 500;
}

/* Content */
.content {
  padding: 24px 28px;
  flex: 1;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 20px;
  gap: 16px;
  flex-wrap: wrap;
}

.page-header h1 {
  font-size: 22px;
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: 4px;
}

.page-header .subtitle {
  font-size: 13px;
  color: var(--color-text-secondary);
}

/* Cards */
.card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

.card-header {
  padding: 14px 18px;
  border-bottom: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.card-header h3 {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text);
}

.card-header .sub {
  font-size: 12px;
  color: var(--color-text-muted);
  margin-top: 2px;
}

.card-body { padding: 18px; }
.card-body.no-pad { padding: 0; }

/* KPI Tiles */
.kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 20px;
}

.kpi {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 16px 18px;
  position: relative;
  overflow: hidden;
}

.kpi .label {
  font-size: 12px;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: 500;
  margin-bottom: 8px;
}

.kpi .value {
  font-size: 24px;
  font-weight: 700;
  color: var(--color-text);
  line-height: 1.1;
}

.kpi .value .unit {
  font-size: 14px;
  font-weight: 500;
  color: var(--color-text-secondary);
  margin-left: 4px;
}

.kpi .delta {
  margin-top: 8px;
  font-size: 12px;
  display: flex;
  align-items: center;
  gap: 4px;
}

.kpi .delta.up { color: var(--color-success); }
.kpi .delta.down { color: var(--color-danger); }
.kpi .delta.neutral { color: var(--color-text-muted); }

.kpi .accent-bar {
  position: absolute;
  top: 0; left: 0;
  width: 3px; height: 100%;
  background: var(--color-accent);
}

.kpi.warning .accent-bar { background: var(--color-warning); }
.kpi.success .accent-bar { background: var(--color-success); }
.kpi.danger .accent-bar { background: var(--color-danger); }

/* Grid layouts */
.grid-2 {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 16px;
  margin-bottom: 20px;
}

.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-bottom: 20px;
}

/* Tables */
.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.data-table thead th {
  text-align: left;
  padding: 11px 18px;
  font-size: 11.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--color-text-muted);
  background: var(--color-surface-alt);
  border-bottom: 1px solid var(--color-border);
  white-space: nowrap;
}

.data-table tbody td {
  padding: 12px 18px;
  border-bottom: 1px solid var(--color-border);
  color: var(--color-text);
  vertical-align: middle;
}

.data-table tbody tr:last-child td { border-bottom: none; }
.data-table tbody tr:hover { background: var(--color-surface-alt); }

.data-table .num { text-align: right; font-variant-numeric: tabular-nums; }

/* Status Pills */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11.5px;
  font-weight: 500;
  padding: 3px 8px;
  border-radius: 12px;
  text-transform: capitalize;
  line-height: 1;
}

.pill.success { background: var(--color-success-soft); color: #166534; }
.pill.warning { background: var(--color-warning-soft); color: #92400e; }
.pill.danger { background: var(--color-danger-soft); color: #991b1b; }
.pill.info { background: var(--color-info-soft); color: #155e75; }
.pill.neutral { background: #e2e8f0; color: #334155; }
.pill.accent { background: var(--color-accent-soft); color: #1e40af; }

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border-strong);
  background: var(--color-surface);
  color: var(--color-text);
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s;
}

.btn:hover { background: var(--color-surface-alt); }

.btn-primary {
  background: var(--color-accent);
  color: #fff;
  border-color: var(--color-accent);
}

.btn-primary:hover { background: #1d4ed8; }

.btn-danger {
  background: var(--color-danger);
  color: #fff;
  border-color: var(--color-danger);
}

.btn-danger:hover { background: #b91c1c; }

.btn-ghost { border-color: transparent; }
.btn-ghost:hover { background: var(--color-surface-alt); }

.btn-sm { padding: 5px 10px; font-size: 12px; }

/* Forms */
.form-control {
  padding: 7px 10px;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  font-family: inherit;
  font-size: 13px;
  background: var(--color-surface);
  color: var(--color-text);
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.form-control:focus {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px var(--color-accent-soft);
}

select.form-control { cursor: pointer; }

/* AI Insight Box */
.insight-box {
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-accent);
  background: var(--color-surface-alt);
  border-radius: var(--radius-md);
  padding: 14px 16px;
  margin-bottom: 12px;
}

.insight-box.warning { border-left-color: var(--color-warning); background: #fffbeb; }
.insight-box.danger { border-left-color: var(--color-danger); background: #fef2f2; }
.insight-box.success { border-left-color: var(--color-success); background: #f0fdf4; }

.insight-box .insight-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.insight-box .insight-body {
  font-size: 13px;
  color: var(--color-text-secondary);
}

.insight-box .insight-body ul {
  margin: 6px 0 0;
  padding-left: 18px;
}

.insight-box .insight-body li { margin-bottom: 3px; }

/* Confidence Bar */
.confidence-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 8px;
}

.confidence-bar .track {
  flex: 1;
  height: 6px;
  background: #e2e8f0;
  border-radius: 3px;
  overflow: hidden;
}

.confidence-bar .fill {
  height: 100%;
  background: var(--color-success);
  border-radius: 3px;
}

.confidence-bar .label {
  font-size: 12px;
  font-weight: 600;
  color: var(--color-text-secondary);
  min-width: 36px;
  text-align: right;
}

/* Recommendation block */
.recommendation {
  background: var(--color-primary);
  color: #fff;
  border-radius: var(--radius-lg);
  padding: 18px 22px;
  margin-bottom: 16px;
}

.recommendation .rec-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: #93c5fd;
  font-weight: 600;
  margin-bottom: 6px;
}

.recommendation .rec-text {
  font-size: 18px;
  font-weight: 600;
  line-height: 1.4;
}

.recommendation .rec-meta {
  margin-top: 10px;
  font-size: 12px;
  color: #cbd5e1;
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
}

/* Factor list */
.factor-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.factor-item {
  padding: 12px 14px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface-alt);
}
.factor-item .factor-label { font-size: 11.5px; color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.4px; margin-bottom: 4px; }
.factor-item .factor-value { font-size: 14px; font-weight: 600; color: var(--color-text); }
.factor-item .factor-impact { font-size: 12px; margin-top: 4px; }
.factor-item .factor-impact.up { color: var(--color-danger); }
.factor-item .factor-impact.down { color: var(--color-success); }
.factor-item .factor-impact.neutral { color: var(--color-text-secondary); }

/* Score Bar */
.score-bar {
  display: flex;
  align-items: center;
  gap: 8px;
}
.score-bar .track {
  width: 80px; height: 6px;
  background: #e2e8f0;
  border-radius: 3px;
  overflow: hidden;
}
.score-bar .fill {
  height: 100%;
  border-radius: 3px;
  background: var(--color-success);
}
.score-bar .fill.medium { background: var(--color-warning); }
.score-bar .fill.low { background: var(--color-danger); }
.score-bar .num { font-size: 12px; font-weight: 600; color: var(--color-text-secondary); min-width: 28px; text-align: right; }

/* Tabs */
.tabs {
  display: flex;
  border-bottom: 1px solid var(--color-border);
  margin-bottom: 18px;
  gap: 4px;
}

.tab {
  padding: 10px 16px;
  font-size: 13px;
  font-weight: 500;
  color: var(--color-text-secondary);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}

.tab.active {
  color: var(--color-accent);
  border-bottom-color: var(--color-accent);
}

.tab:hover:not(.active) { color: var(--color-text); }

/* Chart Container */
.chart-container {
  position: relative;
  height: 280px;
}
.chart-container.sm { height: 200px; }
.chart-container.lg { height: 340px; }

/* Two-column layout for analysis */
.split-2 {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 16px;
}

/* Misc */
.text-muted { color: var(--color-text-muted); }
.text-secondary { color: var(--color-text-secondary); }
.text-success { color: var(--color-success); }
.text-danger { color: var(--color-danger); }
.text-warning { color: var(--color-warning); }
.mt-2 { margin-top: 8px; } .mt-3 { margin-top: 12px; } .mt-4 { margin-top: 16px; }
.mb-2 { margin-bottom: 8px; } .mb-3 { margin-bottom: 12px; } .mb-4 { margin-bottom: 16px; }
.flex { display: flex; }
.flex-between { display: flex; justify-content: space-between; align-items: center; }
.gap-2 { gap: 8px; } .gap-3 { gap: 12px; } .gap-4 { gap: 16px; }

.legend {
  display: flex;
  gap: 14px;
  font-size: 12px;
  color: var(--color-text-secondary);
}
.legend-item { display: flex; align-items: center; gap: 5px; }
.legend-swatch { width: 10px; height: 10px; border-radius: 2px; }

.filter-bar {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

/* Empty State */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 56px 24px;
  text-align: center;
  background: var(--color-surface-alt);
  border: 1px dashed var(--color-border-strong);
  border-radius: var(--radius-lg);
  color: var(--color-text-secondary);
}

.empty-state .empty-icon {
  width: 56px; height: 56px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: var(--color-text-muted);
  margin-bottom: 16px;
}

.empty-state h4 {
  font-size: 15px;
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: 6px;
}

.empty-state p {
  font-size: 13px;
  max-width: 380px;
  line-height: 1.6;
}

.empty-state .btn { margin-top: 14px; }

/* Footer */
.app-footer {
  padding: 14px 28px;
  border-top: 1px solid var(--color-border);
  background: var(--color-surface);
  font-size: 12px;
  color: var(--color-text-muted);
  display: flex;
  justify-content: space-between;
}

/* Login page */
.login-shell {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: var(--color-bg);
}
.login-panel-left {
  background: var(--color-primary);
  color: #fff;
  padding: 60px 56px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.login-brand { font-size: 20px; font-weight: 700; letter-spacing: 0.3px; }
.login-headline { font-size: 32px; font-weight: 600; line-height: 1.25; margin-top: 80px; max-width: 440px; }
.login-sub { font-size: 14px; color: #cbd5e1; margin-top: 16px; max-width: 420px; line-height: 1.7; }
.login-features {
  margin-top: 36px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 380px;
}
.login-feature {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13.5px;
  color: #e2e8f0;
}
.login-feature .num {
  width: 22px; height: 22px;
  background: var(--color-accent);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700;
  flex-shrink: 0;
  margin-top: 1px;
}
.login-meta {
  font-size: 12px;
  color: #94a3b8;
}
.login-panel-right {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px;
}
.login-form {
  width: 100%;
  max-width: 360px;
}
.login-form h2 { font-size: 22px; font-weight: 600; margin-bottom: 6px; }
.login-form p.sub { font-size: 13px; color: var(--color-text-secondary); margin-bottom: 28px; }
.form-group { margin-bottom: 14px; }
.form-group label { display: block; font-size: 12.5px; font-weight: 500; margin-bottom: 5px; color: var(--color-text); }
.form-group .form-control { width: 100%; }
.login-form .btn-primary { width: 100%; justify-content: center; padding: 10px; margin-top: 8px; }
.login-hint {
  margin-top: 22px;
  font-size: 12px;
  color: var(--color-text-muted);
  text-align: center;
  padding: 10px;
  background: var(--color-surface-alt);
  border-radius: var(--radius-md);
  border: 1px dashed var(--color-border-strong);
}

/* Responsive */

/* ── Notebook (1280-1440px) — ลด padding/font เพื่อให้ content พอดี ── */
@media (max-width: 1440px) {
  .supplier-compare-table { font-size: 0.86em; }
  .supplier-cell { padding: 6px 4px; }
  .supplier-compare-table thead th { padding: 8px 5px; }
  /* ลด min-width ของคอลัมน์ที่ไม่จำเป็น เพื่อให้จอ notebook 1280px พอดี */
  .supplier-compare-table th.wd-col,
  .supplier-compare-table td.wd-cell        { min-width: 50px; }
  .supplier-compare-table th.name-col,
  .supplier-compare-table td.item-name-cell { min-width: 140px; }
  .supplier-compare-table th.qty-col,
  .supplier-compare-table td.qty-cell       { min-width: 64px; }
  .supplier-compare-table th.boq-col,
  .supplier-compare-table td.boq-cell       { min-width: 76px; }
  .supplier-compare-table th.sap-col,
  .supplier-compare-table td.sap-cell       { min-width: 108px; }
  .supplier-compare-table th.winner-col,
  .supplier-compare-table td.winner-cell    { min-width: 92px; }
  .supplier-compare-table th.supplier-col,
  .supplier-compare-table td.supplier-cell  { min-width: 88px; }
  .signature-grid { grid-template-columns: repeat(2, 1fr); }
  .terms-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ── Tablet / small laptop (1100px) — ยุบ 2 col → 1 col ── */
@media (max-width: 1100px) {
  .grid-2, .split-2 { grid-template-columns: 1fr; }
  .factor-list { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .signature-grid { grid-template-columns: repeat(2, 1fr); }
  .terms-grid { grid-template-columns: repeat(2, 1fr); }
  .conclusion-fields { grid-template-columns: 1fr; }
  /* ตารางเปรียบเทียบ: scroll ตามแนวนอน พร้อม shadow hint */
  .supplier-compare-table { font-size: 0.82em; }
  .supplier-compare-table { min-width: 600px; }
  .supplier-cell { padding: 5px 3px; }
}

@media (max-width: 800px) {
  .app-shell { grid-template-columns: 1fr; }
  .sidebar { display: none; }
  .kpi-grid { grid-template-columns: repeat(2, 1fr); }
  .login-shell { grid-template-columns: 1fr; }
  .login-panel-left { padding: 36px 28px; }
  .signature-grid { grid-template-columns: 1fr; }
  .terms-grid { grid-template-columns: 1fr; }
}

/* ── Desktop (1920px+) — ขยาย spacing เพื่อใช้พื้นที่ ── */
@media (min-width: 1920px) {
  .supplier-compare-table { font-size: 1em; }
  .supplier-cell { padding: 10px 8px; }
  .card-body { padding: 22px; }
  .supplier-compare-table thead th { padding: 12px 10px; }
}

/* ==========================================================================
   Supplier Comparison (7-supplier) — append-only styles
   ========================================================================== */

/* Mode switcher tabs (already have .tabs / .tab / .tab.active — reuse) */
#compareModeTabs { margin-top: 6px; }

/* ─── Multi-BOQ slot grid (UI ใหม่ — slot ละผู้ขาย) ─── */
.slot-grid-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
  gap: 8px;
}
.slot-grid-title {
  font-weight: 600;
  color: var(--color-text);
  font-size: 14px;
}
.slot-grid-actions {
  display: flex;
  gap: 6px;
}

.supplier-slot-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 12px;
  margin-bottom: 14px;
}

/* Base card */
.supplier-slot {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 12px 10px;
  border-radius: var(--radius-md, 8px);
  background: var(--color-surface);
  border: 1.5px solid var(--color-border);
  min-height: 138px;
  transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
}
/* เฉพาะ empty slot รับ drag-over สำหรับ highlight */
.supplier-slot-empty.drag-over {
  border-color: var(--color-primary);
  background: var(--color-primary-soft);
  box-shadow: 0 0 0 3px rgba(30, 58, 95, 0.12);
}

/* Filled — supplier loaded */
.supplier-slot-filled {
  border-color: var(--color-success);
  background: linear-gradient(180deg, var(--color-success-soft) 0%, var(--color-surface) 60%);
}
.supplier-slot-filled:hover {
  box-shadow: 0 2px 8px rgba(22, 163, 74, 0.12);
}

/* Slot number badge */
.slot-num {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text-secondary);
}
.slot-num.empty {
  color: var(--color-text-muted);
  font-weight: 500;
}

/* Supplier name input — inline, prominent when filled */
.slot-supplier-name {
  display: block;
  width: 100%;
  padding: 6px 8px;
  border: 1px solid var(--color-border-strong);
  border-radius: 6px;
  background: var(--color-surface);
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text);
  transition: border-color 0.15s;
}
.slot-supplier-name:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(30, 58, 95, 0.12);
}
.slot-supplier-name.readonly {
  font-weight: 400;
  font-size: 12px;
  color: var(--color-text-secondary);
  border-style: dashed;
}

/* File info row — icon + filename (truncate) */
.slot-file-info {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 22px;
}
.slot-file-icon { font-size: 14px; }
.slot-file-name {
  flex: 1;
  font-size: 12px;
  color: var(--color-text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Meta row — item count + status */
.slot-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 11px;
  color: var(--color-text-muted);
  margin-top: auto;
  padding-top: 6px;
  border-top: 1px dashed var(--color-border);
}
.slot-status.ready { color: var(--color-success); font-weight: 600; }

/* Remove button — top right corner */
.slot-remove {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1px solid var(--color-border-strong);
  background: var(--color-surface);
  color: var(--color-text-secondary);
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  opacity: 0.5;
  transition: opacity 0.15s, background 0.15s, color 0.15s;
}
.supplier-slot-filled:hover .slot-remove,
.slot-remove:hover {
  opacity: 1;
  background: var(--color-danger, #dc2626);
  color: #fff;
  border-color: var(--color-danger, #dc2626);
}

/* Empty slot remove — เบากว่า filled (เพราะเป็นแค่ undo "+" เฉยๆ) */
.slot-remove-empty {
  top: 4px;
  right: 4px;
  width: 18px;
  height: 18px;
  font-size: 11px;
  opacity: 0.35;
  background: transparent;
  border-color: transparent;
}
.supplier-slot-empty:hover .slot-remove-empty {
  opacity: 0.55;
}
.slot-remove-empty:hover {
  opacity: 1 !important;
  background: var(--color-danger, #dc2626);
  color: #fff;
  border-color: var(--color-danger, #dc2626);
}

/* Empty slot — drop zone */
.supplier-slot-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  border-style: dashed;
  cursor: pointer;
  color: var(--color-text-secondary);
  gap: 6px;
  padding-top: 16px;
}
.supplier-slot-empty:hover {
  border-color: var(--color-primary);
  background: var(--color-primary-soft);
  color: var(--color-primary);
}
.slot-drop-hint {
  color: var(--color-text-muted);
}
.supplier-slot-empty:hover .slot-drop-hint { color: var(--color-primary); }
.slot-drop-text {
  font-size: 12px;
  line-height: 1.45;
  color: var(--color-text-secondary);
}
.slot-drop-text a {
  color: var(--color-primary);
  text-decoration: none;
  font-weight: 600;
}
.slot-drop-text a:hover { text-decoration: underline; }

/* "+ เพิ่มช่อง" card */
.slot-add-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 6px;
  border-style: dashed;
  border-color: var(--color-border-strong);
  background: var(--color-surface-alt);
  cursor: pointer;
  font-family: inherit;
  color: var(--color-text-secondary);
  padding: 16px 12px;
  min-height: 138px;
}
.slot-add-card:hover {
  border-color: var(--color-primary);
  background: var(--color-primary-soft);
  color: var(--color-primary);
}
.slot-add-icon {
  font-size: 28px;
  line-height: 1;
  font-weight: 300;
  color: var(--color-text-muted);
}
.slot-add-card:hover .slot-add-icon { color: var(--color-primary); }
.slot-add-text {
  font-size: 12px;
  font-weight: 500;
}
.slot-add-text .muted { color: var(--color-text-muted); font-weight: 400; font-size: 11px; }

/* ─── Compare trigger bar (inline below grid) ─── */
.compare-trigger-bar {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  padding: 14px 16px;
  border-radius: var(--radius-md, 8px);
  border: 1px solid var(--color-border);
  background: var(--color-surface-alt);
  margin-top: 4px;
}
.compare-trigger-bar .threshold-slider {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--color-text-secondary);
}
.compare-trigger-bar .threshold-slider input[type="range"] {
  width: 180px;
  accent-color: var(--color-primary);
}
.compare-trigger-bar .threshold-label { white-space: nowrap; }
.compare-trigger-bar .btn-compare {
  padding: 10px 18px;
  font-size: 14px;
  font-weight: 600;
}
.compare-trigger-bar .compare-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  margin-left: 8px;
  padding: 0 6px;
  border-radius: 11px;
  background: rgba(255, 255, 255, 0.22);
  font-size: 12px;
  font-weight: 700;
}
.compare-trigger-bar-hint {
  display: flex;
  align-items: center;
  justify-content: center;
  border-style: dashed;
  background: transparent;
  color: var(--color-text-secondary);
  font-size: 13px;
}
.compare-trigger-bar-hint .muted {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* Responsive — มือถือ/จอเล็ก */
@media (max-width: 800px) {
  .supplier-slot-grid {
    grid-template-columns: 1fr;
  }
  .compare-trigger-bar {
    padding: 10px 12px;
  }
  .compare-trigger-bar .threshold-slider input[type="range"] {
    width: 120px;
  }
}

/* File info bar (reused) — already has .file-info-bar, .file-icon, .file-meta */

/* Supplier comparison scroll wrapper */
.supplier-compare-scroll {
  overflow-x: auto;
  max-width: 100%;
  /* visual cue เมื่อ table กว้างเกิน viewport (เลื่อนซ้าย-ขวาได้) */
  background:
    linear-gradient(90deg, var(--color-surface) 30%, rgba(255,255,255,0)) left center / 24px 100% no-repeat local,
    linear-gradient(-90deg, var(--color-surface) 30%, rgba(255,255,255,0)) right center / 24px 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%, rgba(15,23,42,0.12), rgba(0,0,0,0)) left center / 24px 100% no-repeat local,
    radial-gradient(farthest-side at 100% 50%, rgba(15,23,42,0.12), rgba(0,0,0,0)) right center / 24px 100% no-repeat local;
  background-attachment: local, local, scroll, scroll;
  background-color: var(--color-surface);
}
.supplier-compare-table {
  /* compact column widths — ลดพื้นที่ว่างใน cell แต่ละคอลัมน์
     - min-width 680px: จอ notebook 1280px (content ~984px) ใส่ 2-3 suppliers ได้พอดี
     - table-layout: auto — คอลัมน์ขยายตาม min-width เมื่อ supplier 4+ ราย
     - font-variant-numeric: tabular-nums ทั้งตาราง → ตัวเลขจัดแนวตรงกัน ไม่ดัน cell */
  min-width: 680px;
  font-size: 0.93em;
  width: 100%;
  table-layout: auto;
  font-variant-numeric: tabular-nums;
}
/* Fluid column widths — compact กว่าเดิม เพื่อไม่ให้ cell กินพื้นที่ว่าง */
.supplier-compare-table th.wd-col,
.supplier-compare-table td.wd-cell        { width: 6%;   min-width: 60px;  text-align: center; }
.supplier-compare-table th.name-col,
.supplier-compare-table td.item-name-cell { width: 22%;  min-width: 160px; text-align: left; }
.supplier-compare-table th.qty-col,
.supplier-compare-table td.qty-cell       { width: 7%;   min-width: 72px;  text-align: center; }
.supplier-compare-table th.boq-col,
.supplier-compare-table td.boq-cell       { width: 8%;   min-width: 84px;  text-align: center; }
.supplier-compare-table th.supplier-col,
.supplier-compare-table td.supplier-cell  { width: auto; min-width: 96px;  text-align: center; }
.supplier-compare-table th.sap-col,
.supplier-compare-table td.sap-cell       { width: 12%;  min-width: 120px; text-align: center; }
.supplier-compare-table th.winner-col,
.supplier-compare-table td.winner-cell    { width: 9%;   min-width: 96px;  text-align: left; }
.supplier-compare-table thead th {
  background: var(--color-surface-alt);
  font-weight: 600;
  white-space: nowrap;
  padding: 9px 6px;
  text-align: center;          /* header ตรงกับ td (เดิมจัดซ้าย ทำให้ดูเหมือนมี padding ซ้ายเยอะ) */
  font-variant-numeric: normal; /* header ไม่ใช่ตัวเลข */
}
/* Name column header — คง text-align: left ให้ตรงกับ cell */
.supplier-compare-table thead th.name-col,
.supplier-compare-table thead th.winner-col {
  text-align: left;
}
.supplier-compare-table thead th.supplier-col {
  background: #f8fafc;
  border-left: 1px solid var(--color-border);
}
.supplier-compare-table thead th .supplier-header-name {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--color-text);
  line-height: 1.25;
  max-width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.supplier-compare-table thead th .supplier-header-meta {
  font-size: 10px;
  color: var(--color-text-muted);
  margin-top: 2px;
  font-weight: 400;
}
.supplier-compare-table thead th[style*="background:var(--color-info-soft)"] {
  background: var(--color-info-soft) !important;
  color: var(--color-info);
}
.supplier-compare-table thead th[style*="background:var(--color-primary-soft)"] {
  background: var(--color-primary-soft) !important;
  color: var(--color-primary);
}

/* Row */
.data-row .wd-cell .wd-pill {
  display: inline-block;
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 600;
  background: var(--color-primary-soft);
  color: var(--color-primary);
  border-radius: 999px;
}
.data-row .item-name-cell {
  font-size: 12px;
  line-height: 1.35;
  color: var(--color-text);
  vertical-align: middle;
  padding: 7px 8px;
}
.data-row .qty-cell {
  vertical-align: middle;
  padding: 7px 4px;
}
.data-row .qty-cell .unit-label {
  font-size: 10.5px;
  color: var(--color-text-muted);
}
.data-row .qty-cell .qty-mult,
.data-row .qty-cell .qty-eq {
  color: var(--color-text-muted);
  margin: 0 2px;
  font-weight: 400;
}
.data-row .qty-cell strong {
  color: var(--color-text);
  font-weight: 700;
}
.data-row .boq-cell {
  background: var(--color-info-soft);
  font-weight: 600;
  color: var(--color-info);
  vertical-align: middle;
  padding: 7px 4px;
}
.data-row .sap-cell {
  vertical-align: middle;
  padding: 7px 5px;
}
.data-row .wd-cell {
  vertical-align: middle;
  padding: 6px 4px;
}
.data-row .wd-cell .wd-pill {
  display: inline-block;
  padding: 2px 7px;
  font-size: 10.5px;
  font-weight: 600;
  background: var(--color-primary-soft);
  color: var(--color-primary);
  border-radius: 999px;
  white-space: nowrap;
}

/* Supplier cells */
.supplier-cell {
  position: relative;
  padding: 7px 5px;
  border-left: 1px solid var(--color-border);
  vertical-align: middle;      /* จัดตัวเลขราคาให้อยู่กลาง cell → ไม่เหลือพื้นที่ว่างข้างบน/ล่าง */
  text-align: center;
}
.supplier-cell > * { text-align: center; }   /* ลูกทุกตัวจัดกลาง (ราคา + บรรทัด "รวม xxx" + ป้าย "ถูกสุด") */
.supplier-cell.empty {
  color: var(--color-text-muted);
}
.supplier-cell.cheapest {
  background: var(--color-success-soft);
  color: var(--color-success);
  font-weight: 600;
}
.supplier-cell.cheapest::before {
  content: '';
  position: absolute;
  top: 0; left: 0; bottom: 0;
  width: 3px;
  background: var(--color-success);
}
.supplier-cell .supplier-cell-price {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;        /* กันตัวเลขตัดบรรทัด */
  font-weight: 600;
  display: inline-block;
}
.supplier-cell .supplier-cell-total {
  font-size: 10.5px;
  color: var(--color-text-muted);
  margin-top: 2px;
  white-space: nowrap;
}
.cheapest-tag {
  display: inline-block;
  margin-top: 3px;
  padding: 1px 5px;
  font-size: 9px;
  font-weight: 700;
  background: var(--color-success);
  color: white;
  border-radius: 999px;
  letter-spacing: 0.3px;
  white-space: nowrap;
}

/* Winner row (manually picked) */
.data-row.winner-row {
  background: rgba(37, 99, 235, 0.04);
}
.data-row.winner-row > td:first-child {
  border-left: 3px solid var(--color-accent);
}

/* Winner radios */
.winner-cell { padding: 6px 4px 6px 6px; vertical-align: middle; text-align: left; }
.winner-radios {
  display: flex;
  flex-direction: column;
  gap: 2px;
  align-items: flex-start;     /* ชิดซ้าย — จุดเลือกผู้ชนะเรียงเป็นแนวเดียวกัน */
}
.winner-radio {
  display: flex;
  align-items: center;
  gap: 5px;
  cursor: pointer;
  padding: 3px 6px;
  border-radius: 4px;
  font-size: 11px;
  color: var(--color-text-secondary);
  transition: all 0.15s;
  border: 1px solid transparent;
  width: auto;                /* ไม่ต้องเต็มความกว้าง — ให้ radio + label ชิดซ้ายแคบๆ */
  justify-content: flex-start;
}
.winner-radio:hover {
  background: var(--color-surface-alt);
}
.winner-radio.selected {
  background: var(--color-accent-soft);
  color: var(--color-accent);
  border-color: var(--color-accent);
  font-weight: 600;
}
.winner-radio input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.winner-radio-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 2px solid var(--color-border-strong);
  flex-shrink: 0;
  position: relative;
  transition: all 0.15s;
}
.winner-radio.selected .winner-radio-dot {
  border-color: var(--color-accent);
  background: var(--color-accent);
}
.winner-radio.selected .winner-radio-dot::after {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 4px; height: 4px;
  border-radius: 50%;
  background: white;
}
.winner-radio-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Conclusion card */
.conclusion-card { margin-top: 16px; }
.conclusion-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 16px;
}
.conclusion-field label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--color-text-secondary);
  margin-bottom: 4px;
}
.conclusion-field .form-control { width: 100%; }
.conclusion-preview {
  background: var(--color-surface-alt);
  border-left: 4px solid var(--color-accent);
  padding: 14px 16px;
  border-radius: 6px;
  margin-bottom: 16px;
}
.conclusion-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 6px;
}
.conclusion-text {
  font-size: 14px;
  line-height: 1.6;
  color: var(--color-text);
}
.conclusion-totals {
  border-top: 1px solid var(--color-border);
  padding-top: 12px;
}
.conclusion-totals-label {
  font-size: 11.5px;
  color: var(--color-text-secondary);
  font-weight: 600;
  margin-bottom: 8px;
}
.conclusion-totals-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 8px;
}
.conclusion-total-item {
  background: var(--color-surface-alt);
  padding: 8px 10px;
  border-radius: 4px;
  border: 1px solid var(--color-border);
}
.conclusion-total-item .name {
  font-size: 11px;
  color: var(--color-text-secondary);
  margin-bottom: 2px;
}
.conclusion-total-item .total {
  font-size: 13px;
  font-weight: 700;
  color: var(--color-primary);
  font-variant-numeric: tabular-nums;
}

/* Signature card */
.signature-card { margin-top: 16px; }
.signature-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
.signature-block {
  border: 1px solid var(--color-border);
  border-radius: 6px;
  padding: 14px 12px;
  background: var(--color-surface);
  min-height: 180px;
  display: flex;
  flex-direction: column;
}
.signature-role {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--color-primary);
  margin-bottom: 10px;
  text-align: center;
}
.signature-line {
  border-bottom: 1px dashed var(--color-border-strong);
  height: 30px;
  margin-bottom: 4px;
}
.signature-meta {
  text-align: center;
  font-size: 10px;
  color: var(--color-text-muted);
  margin-bottom: 10px;
}
.signature-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: auto;
}
.signature-fields .field-label {
  font-size: 10px;
  color: var(--color-text-muted);
  margin-bottom: 2px;
}
.signature-fields .field-line {
  border-bottom: 1px solid var(--color-text-secondary);
  height: 22px;
}
.signature-group {
  margin-top: 8px;
  padding-top: 6px;
  border-top: 1px solid var(--color-border);
  font-size: 9.5px;
  color: var(--color-text-muted);
  text-align: center;
  font-style: italic;
}

/* Signature — โหมดแก้ไขชื่อ/ตำแหน่ง */
.signature-group-block { margin-bottom: 18px; }
.signature-group-block:last-child { margin-bottom: 0; }
.signature-group-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--color-border);
}
.signature-group-label {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--color-text-secondary);
}
.signature-edit {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 10px;
}
.signature-edit .form-control { width: 100%; font-size: 12px; }
.signature-edit .sig-title {
  font-weight: 600;
  color: var(--color-primary);
}
.signature-block .signature-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  margin-top: auto;
  margin-bottom: 0;
}
.btn-icon {
  padding: 2px 7px;
  font-size: 12px;
  line-height: 1.4;
}

/* Terms card */
.terms-card { margin-top: 16px; }

/* Sort toggle (R5) */
.card-header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}
.sort-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--color-text-secondary);
  background: #f4f6f8;
  border: 1px solid var(--color-border);
  border-radius: 16px;
  padding: 5px 12px;
  transition: all 0.15s;
  white-space: nowrap;
}
.sort-toggle:hover { background: #e8edf2; }
.sort-toggle input[type="checkbox"] {
  width: 14px;
  height: 14px;
  cursor: pointer;
  accent-color: var(--color-primary);
}
.sort-toggle:has(input:checked) {
  background: #e8f0fe;
  color: var(--color-primary);
  border-color: #b8d4f8;
}

/* Winner Banner (R7) */
.winner-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  background: linear-gradient(135deg, #fff8e1 0%, #fff3c4 100%);
  border: 1px solid #f5d76e;
  border-left: 5px solid #f5b800;
  border-radius: 10px;
  padding: 16px 20px;
  margin-bottom: 18px;
  flex-wrap: wrap;
}
.winner-banner-left {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 220px;
}
.winner-banner-icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #f5b800;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  font-weight: 700;
  flex-shrink: 0;
}
.winner-banner-label {
  font-size: 12px;
  color: #8b6914;
  font-weight: 600;
  letter-spacing: 0.3px;
  text-transform: uppercase;
}
.winner-banner-name {
  font-size: 16px;
  font-weight: 700;
  color: #5c4400;
  margin-top: 2px;
}
.winner-banner-stats {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
}
.winner-banner-stat {
  min-width: 130px;
}
.stat-label {
  font-size: 11px;
  color: #8b6914;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  margin-bottom: 2px;
}
.stat-value {
  font-size: 17px;
  font-weight: 700;
  color: #5c4400;
}
.stat-value.stat-up { color: #c0392b; }
.stat-value.stat-down { color: #166534; }
.stat-unit {
  font-size: 11px;
  font-weight: 500;
  color: #8b6914;
  margin-left: 4px;
}
@media (max-width: 700px) {
  .winner-banner { flex-direction: column; align-items: flex-start; }
  .winner-banner-stats { width: 100%; }
}

/* Validation warnings (R3) */
.validation-warning {
  background: #fff7ed;
  border: 1px solid #fbbf24;
  border-left: 5px solid #f59e0b;
  border-radius: 8px;
  padding: 14px 18px;
  margin-bottom: 18px;
}
.validation-warning-head {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  color: #92400e;
  font-size: 13.5px;
  margin-bottom: 8px;
}
.warning-icon {
  font-size: 18px;
  flex-shrink: 0;
}
.validation-warning ul {
  margin: 0 0 8px 20px;
  padding: 0;
  color: #78350f;
  font-size: 12.5px;
  line-height: 1.6;
}
.validation-warning-foot {
  font-size: 11.5px;
  color: #92400e;
  font-style: italic;
}
.terms-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
.terms-grid-multi {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 18px;
}
.terms-column-head {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--color-primary);
  margin-bottom: 10px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--color-border);
}

/* Terms Dropdown (Phase 1 enhancement) */
.terms-selector {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.terms-selector-label {
  font-weight: 600;
  color: var(--color-text-secondary);
  font-size: 13px;
  white-space: nowrap;
}
.terms-dropdown {
  flex: 1;
  min-width: 220px;
  max-width: 480px;
  font-weight: 600;
  color: var(--color-primary);
}
.terms-single {
  background: #fafbfc;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  padding: 16px 18px;
}
.terms-single .terms-column-head {
  font-size: 14px;
  margin-bottom: 14px;
}
.term-input-row {
  display: flex;
  align-items: center;
  gap: 6px;
}
.term-input-row .form-control { flex: 1; }
.btn-icon {
  background: #f4f6f8;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  padding: 6px 10px;
  cursor: pointer;
  font-size: 14px;
  transition: background 0.15s;
}
.btn-icon:hover { background: #e8edf2; }
.winner-badge {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 8px;
  background: #f5e6a8;
  color: #8b6914;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 700;
}
.btn-secondary {
  background: #f4f6f8;
  color: var(--color-text-primary);
  border: 1px solid var(--color-border);
}
.btn-secondary:hover { background: #e8edf2; }
.btn-danger {
  background: #fff;
  color: #c0392b;
  border: 1px solid #f1c5c0;
}
.btn-danger:hover { background: #fdf0ee; }
.btn-sm {
  font-size: 12px;
  padding: 6px 12px;
  border-radius: 6px;
  cursor: pointer;
}
.terms-column .term-field { margin-bottom: 10px; }
.term-field label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--color-text-secondary);
  margin-bottom: 4px;
}
.term-field .form-control { width: 100%; }

/* Action bar */
.action-bar {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--color-border);
}

/* ==========================================================================
   Source badges — แสดงแหล่งข้อมูลของ stats แต่ละ row
   ========================================================================== */
.source-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.2px;
  white-space: nowrap;
  vertical-align: middle;
}
.source-badge.source-sap {
  background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%);
  color: #0d47a1;
  border: 1px solid #90caf9;
}
.source-badge.source-sample {
  background: linear-gradient(135deg, #fff8e1 0%, #ffecb3 100%);
  color: #e65100;
  border: 1px solid #ffcc80;
}
.source-badge.source-cat {
  background: linear-gradient(135deg, #f3e5f5 0%, #e1bee7 100%);
  color: #6a1b9a;
  border: 1px solid #ce93d8;
  font-style: italic;
}

/* ==========================================================================
   PRINT — A4 portrait, hide chrome
   ========================================================================== */
@media print {
  @page {
    size: A4 portrait;
    margin: 12mm 10mm;
  }
  html, body {
    background: white !important;
    color: black !important;
    font-size: 11px;
  }
  .sidebar,
  .app-header,
  .app-footer,
  .tabs,
  #supplierComparisonUploadSection,
  .action-bar {
    display: none !important;
  }
  .app-shell {
    grid-template-columns: 1fr !important;
  }
  .content {
    padding: 0 !important;
    margin: 0 !important;
    max-width: 100% !important;
  }
  .page-header h1 { font-size: 18px; }
  .page-header .subtitle { font-size: 11px; }
  .card {
    box-shadow: none !important;
    border: 1px solid #cbd5e1 !important;
    page-break-inside: avoid;
    margin-bottom: 8px !important;
  }
  .card-header h3 { font-size: 13px; }
  .kpi-grid {
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 6px !important;
  }
  .kpi { padding: 6px 8px !important; }
  .kpi .value { font-size: 16px !important; }
  .supplier-compare-scroll {
    overflow: visible !important;
  }
  .supplier-compare-table {
    min-width: 0 !important;
    font-size: 9.5px !important;
  }
  .supplier-compare-table thead th,
  .supplier-compare-table tbody td {
    padding: 4px 5px !important;
  }
  .winner-radios { display: none !important; }
  .winner-cell {
    background: white !important;
    padding: 2px !important;
  }
  .data-row.winner-row { background: rgba(37, 99, 235, 0.06) !important; }
  .winner-cell::before {
    content: '✓';
    color: var(--color-accent);
    font-weight: 700;
    font-size: 14px;
  }
  .signature-grid {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 8px !important;
    page-break-inside: auto;
  }
  .signature-block {
    page-break-inside: avoid;
    min-height: 150px !important;
    padding: 8px !important;
  }
  .signature-role { font-size: 10.5px !important; }
  .terms-grid {
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 8px !important;
  }
  .conclusion-fields {
    grid-template-columns: 1fr 1fr !important;
    page-break-inside: avoid;
  }
  /* Hide form input borders when printing — values stay visible */
  .term-field .form-control {
    border: none !important;
    border-bottom: 1px solid #000 !important;
    background: transparent !important;
    padding: 2px 0 !important;
  }

  /* Print button — hide on print */
  button[onclick="window.print()"] { display: none !important; }

  /* AI Analysis page — preserve charts + factor cards */
  .forecast-chart-wrap,
  .factor-card,
  canvas#forecast-chart,
  canvas#external-factors-chart {
    page-break-inside: avoid !important;
  }
  canvas { max-height: 280px !important; }
  .factor-list { font-size: 10px !important; }
  .factor-item { padding: 6px 8px !important; margin-bottom: 4px !important; }
  .page-header { margin-bottom: 8px !important; padding-bottom: 6px !important; }
}