:root {
  --color-bg: #f4f6f8;
  --color-surface: #ffffff;
  --color-border: #e2e5e9;
  --color-text: #1f2933;
  --color-text-muted: #64748b;
  --color-primary: #2563eb;
  --color-primary-hover: #1d4ed8;
  --color-danger: #dc2626;
  --color-danger-hover: #b91c1c;
  --sidebar-width: 220px;
  --topbar-height: 56px;
  --transition-fast: 0.15s ease;
  --transition-medium: 0.25s ease;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background: var(--color-bg);
  color: var(--color-text);
}

/* ---------- App shell / layout ---------- */

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

.topbar {
  height: var(--topbar-height);
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0 1rem;
  position: sticky;
  top: 0;
  z-index: 20;
}

.burger {
  display: none;
  background: none;
  border: none;
  font-size: 1.4rem;
  cursor: pointer;
  color: var(--color-text);
}

.topbar-brand { display: flex; align-items: center; gap: 0.5rem; flex: 1; }
.topbar-logo { width: 20px; height: 20px; color: var(--color-primary); flex-shrink: 0; }
.topbar-title { font-weight: 600; }

.app-body { display: flex; flex: 1; min-height: 0; }

.sidebar {
  width: var(--sidebar-width);
  background: var(--color-surface);
  border-right: 1px solid var(--color-border);
  padding: 1rem 0.6rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  overflow-y: auto;
}

.nav-group { display: flex; flex-direction: column; gap: 0.15rem; }

.nav-group-title {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  padding: 0 0.65rem;
  margin-bottom: 0.15rem;
}

.nav-link {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.55rem 0.65rem;
  border-radius: 6px;
  text-decoration: none;
  color: var(--color-text);
  font-size: 0.9rem;
  border-left: 3px solid transparent;
  transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}

.nav-icon { width: 17px; height: 17px; flex-shrink: 0; color: var(--color-text-muted); transition: color var(--transition-fast); }

.nav-link:hover { background: var(--color-bg); }
.nav-link.active {
  background: color-mix(in srgb, var(--color-primary) 10%, transparent);
  color: var(--color-primary);
  border-left-color: var(--color-primary);
  font-weight: 600;
}
.nav-link.active .nav-icon { color: var(--color-primary); }

.sidebar-user {
  margin-top: auto;
  padding-top: 1rem;
  border-top: 1px solid var(--color-border);
  font-size: 0.85rem;
}

.sidebar-user-name { font-weight: 600; }
.sidebar-user-role { color: var(--color-text-muted); text-transform: capitalize; margin-bottom: 0.5rem; }
.logout-link { color: var(--color-danger); }
.logout-link .nav-icon { color: var(--color-danger); }

.content { flex: 1; padding: 1.5rem; min-width: 0; }

.breadcrumb {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.8rem;
  color: var(--color-text-muted);
  margin-bottom: 0.75rem;
}
.breadcrumb a { color: var(--color-text-muted); text-decoration: none; }
.breadcrumb a:hover { color: var(--color-primary); text-decoration: underline; }
.breadcrumb-sep { color: var(--color-border); }

/* ---------- Notifications ---------- */

[x-cloak] { display: none !important; }

.notif-bell { position: relative; }

.bell-btn {
  position: relative;
  background: none;
  border: none;
  font-size: 1.2rem;
  cursor: pointer;
  padding: 0.3rem 0.4rem;
  border-radius: 8px;
  line-height: 1;
}

.bell-btn:hover { background: var(--color-bg); }

.notif-badge {
  position: absolute;
  top: -0.15rem;
  right: -0.15rem;
  background: var(--color-danger);
  color: #fff;
  font-size: 0.65rem;
  font-weight: 700;
  border-radius: 999px;
  padding: 0.05rem 0.35rem;
  min-width: 1.1rem;
  text-align: center;
}

.notif-dropdown {
  position: absolute;
  top: calc(100% + 0.5rem);
  right: 0;
  width: 300px;
  max-width: calc(100vw - 2rem);
  max-height: 380px;
  overflow-y: auto;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  z-index: 30;
}

.notif-dropdown-title {
  padding: 0.7rem 1rem;
  font-weight: 600;
  font-size: 0.9rem;
  border-bottom: 1px solid var(--color-border);
}

.notif-item {
  display: block;
  padding: 0.6rem 1rem;
  border-bottom: 1px solid var(--color-border);
  text-decoration: none;
  color: var(--color-text);
  transition: background var(--transition-fast);
}

.notif-item:last-child { border-bottom: none; }
.notif-item:hover { background: var(--color-bg); }
.notif-item.unread { background: #eff6ff; }

.notif-message { font-size: 0.85rem; }
.notif-time { font-size: 0.7rem; color: var(--color-text-muted); margin-top: 0.15rem; }
.notif-empty { padding: 1.5rem 1rem; text-align: center; color: var(--color-text-muted); font-size: 0.85rem; }

/* ---------- Help Center topbar icon ---------- */

.topbar-help-icon { display: flex; align-items: center; color: var(--color-text-muted); flex-shrink: 0; }
.topbar-help-icon .nav-icon { width: 20px; height: 20px; }
.topbar-help-icon:hover { color: var(--color-primary); }

.help-article-list { list-style: none; padding: 0; margin: 0 0 1rem; }
.help-article-list li { padding: 0.4rem 0; border-bottom: 1px solid var(--color-border); display: flex; align-items: center; gap: 0.5rem; }
.help-article-list li:last-child { border-bottom: none; }

/* ---------- Language toggle ---------- */

.lang-toggle { display: flex; align-items: center; gap: 0.35rem; font-size: 0.9rem; }
.lang-toggle a { color: var(--color-text-muted); text-decoration: none; padding: 0.15rem 0.35rem; border-radius: 4px; }
.lang-toggle a.active { color: var(--color-primary); font-weight: 600; }
.lang-toggle a:hover { background: var(--color-bg); }
.login-lang-toggle { position: absolute; top: 1rem; right: 1rem; }

/* ---------- Page header / buttons ---------- */

.page-header {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.25rem;
}

.page-header h1 { margin: 0; font-size: 1.4rem; font-weight: 700; color: var(--color-text); }
.page-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; }

.btn {
  display: inline-block;
  padding: 0.55rem 1rem;
  border-radius: 8px;
  border: 1px solid transparent;
  font-size: 0.9rem;
  cursor: pointer;
  text-decoration: none;
  text-align: center;
  transition: background var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast);
}

.btn:active { transform: scale(0.97); }

.btn-primary { background: var(--color-primary); color: #fff; }
.btn-primary:hover { background: var(--color-primary-hover); }
.btn-emphasis { box-shadow: 0 0 0 3px rgba(234, 88, 12, 0.35); }

.btn-secondary { background: var(--color-surface); color: var(--color-text); border-color: var(--color-border); }
.btn-secondary:hover { background: var(--color-bg); }

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

.btn-success { background: #dcfce7; color: #15803d; }
.btn-success:hover { background: #15803d; color: #fff; }

.btn-small { padding: 0.35rem 0.6rem; font-size: 0.8rem; }

.status-badge {
  display: inline-block;
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  white-space: nowrap;
}

.status-pending { background: #fef3c7; color: #92400e; }
.status-approved { background: #dcfce7; color: #15803d; }
.status-rejected { background: #fee2e2; color: var(--color-danger); }
.status-draft { background: #f1f5f9; color: #475569; }

/* Muc 15g.7 - priority_level badges, deliberately a DIFFERENT color scale
   from Delay Status (status-pending/approved/rejected above) so "how
   urgently to process" is never visually confused with "is delivery
   late". */
.priority-badge {
  display: inline-block;
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  white-space: nowrap;
}
.priority-urgent { background: #7f1d1d; color: #fff; }
.priority-important { background: #fed7aa; color: #9a3412; }
.priority-medium { background: #fef9c3; color: #854d0e; }
.priority-normal { background: #e2e8f0; color: #475569; }

.row-meta { font-size: 0.75rem; color: var(--color-text-muted); margin-top: 0.15rem; }

/* Muc 15g.8.C - expand-in-place popover for the 4 requester fields, kept
   out of the main table columns entirely (no new column added). */
.requester-popover summary { cursor: pointer; color: var(--color-primary); list-style: none; display: inline-block; }
.requester-popover summary::-webkit-details-marker { display: none; }
.requester-popover-content {
  margin-top: 0.3rem;
  padding: 0.5rem 0.65rem;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: 6px;
  font-size: 0.8rem;
  max-width: 280px;
}
.requester-popover-content p { margin: 0.15rem 0; }

/* Muc 14e - "Xem thêm/Thu gọn" clamp for long Notes-style cells, so one
   unusually long row doesn't stretch the whole list table. */
.clamped-text-collapsed {
  max-height: 4.5em;
  overflow: hidden;
}
.link-button {
  background: none;
  border: none;
  padding: 0;
  margin-top: 0.2rem;
  color: var(--color-primary);
  font-size: 0.78rem;
  cursor: pointer;
  display: block;
}
.link-button:hover { text-decoration: underline; }

/* ---------- Tables ---------- */

.table-wrap {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  overflow-x: auto;
  overflow-y: hidden;
}

.data-table { width: 100%; border-collapse: collapse; }

.data-table th, .data-table td {
  text-align: left;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--color-border);
  font-size: 0.9rem;
  /* Muc 14e (v4.19/v4.26 real bug) - a long unbroken string (typically a
     URL with tracking params) has no spaces to wrap at, so the browser
     either stretches the cell horizontally or breaks it character-by-
     character, ballooning the whole row's height. Applied system-wide, not
     just RFQ Notes. */
  overflow-wrap: anywhere;
  word-break: break-word;
}

.data-table td { font-weight: 400; color: var(--color-text); }

.data-table th {
  background: var(--color-bg);
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* items-table (RFQItem lines on the Internal RFQ detail page) has enough
   columns + long free-text content (spec/notes) that auto column widths
   push the right-most columns (target price, notes) past the container -
   fixed layout + word-break keeps every column inside the page width. */
.items-table { table-layout: fixed; }
/* overflow-wrap: anywhere only on td - long free-text (spec/notes) needs it
   to avoid overflow, but applying it to th shreds short header words like
   "Description" into one letter per line whenever the column gets narrow.
   Headers just wrap at spaces (normal), same as any other short label. */
.items-table td { word-break: break-word; overflow-wrap: anywhere; }
.items-table th { overflow-wrap: normal; word-break: normal; }
.items-table th:first-child, .items-table td:first-child { width: 2.5rem; }
.items-table th:nth-child(6), .items-table td:nth-child(6),
.items-table th:nth-child(7), .items-table td:nth-child(7) { width: 4.5rem; }

.table-row { transition: background var(--transition-fast), opacity var(--transition-medium); }
.table-row:hover { background: #f8fafc; }
.table-row[data-href] { cursor: pointer; }
.table-row:last-child td { border-bottom: none; }

/* Ready for any list page that grows a real page/limit param later (Muc
   14d.3 "chuan bi san phan trang") - not wired to a specific route yet,
   just the reusable visual component. */
.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  padding: 1rem 0 0.25rem;
  font-size: 0.85rem;
}
.pagination a, .pagination span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2rem;
  height: 2rem;
  padding: 0 0.5rem;
  border-radius: 6px;
  text-decoration: none;
  color: var(--color-text);
}
.pagination a:hover { background: var(--color-bg); }
.pagination .pagination-current { background: var(--color-primary); color: #fff; font-weight: 600; }
.pagination .pagination-disabled { color: var(--color-text-muted); opacity: 0.5; pointer-events: none; }

/* ---------- Toast / snackbar (Muc 14d.4) ---------- */

.toast-container {
  position: fixed;
  bottom: 1.25rem;
  right: 1.25rem;
  z-index: 100;
}

.toast {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-width: 220px;
  max-width: 360px;
  padding: 0.75rem 1rem;
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.16);
  font-size: 0.9rem;
  color: #fff;
  animation: toast-in var(--transition-medium) ease-out;
}
.toast-success { background: #15803d; }
.toast-error { background: var(--color-danger); }
.toast-warning { background: #b45309; }
.toast span { flex: 1; }
.toast-close {
  background: none;
  border: none;
  color: inherit;
  opacity: 0.8;
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  padding: 0;
}
.toast-close:hover { opacity: 1; }

@keyframes toast-in {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}
.toast-leave { transition: opacity var(--transition-medium), transform var(--transition-medium); }
.toast-leave-start { opacity: 1; }
.toast-leave-end { opacity: 0; transform: translateY(10px); }

/* ---------- Content fade-in + skeleton loading (Muc 14d.4) ---------- */

.content { animation: content-fade-in var(--transition-medium) ease-out; }
@keyframes content-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

.htmx-indicator { display: none; }
.htmx-request .htmx-indicator { display: block; }
.htmx-request.htmx-indicator { display: block; }

.skeleton-row {
  height: 1rem;
  border-radius: 4px;
  margin: 0.5rem 0;
  background: linear-gradient(90deg, var(--color-border) 25%, var(--color-bg) 37%, var(--color-border) 63%);
  background-size: 400% 100%;
  animation: skeleton-shimmer 1.4s ease infinite;
}

@keyframes skeleton-shimmer {
  0% { background-position: 100% 50%; }
  100% { background-position: 0 50%; }
}

@media (prefers-reduced-motion: reduce) {
  .toast, .content { animation: none; }
  .skeleton-row { animation: none; }
  .table-row, .nav-link, .btn { transition: none; }
}

.num-cell { text-align: right; font-variant-numeric: tabular-nums; }
.actions-cell { display: flex; gap: 0.4rem; }
.empty-row { text-align: center; color: var(--color-text-muted); padding: 2rem 1rem; }

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  padding: 1.5rem 1rem;
  color: var(--color-text-muted);
}
.empty-state-icon { width: 40px; height: 40px; opacity: 0.5; }
.empty-state-message { font-size: 0.9rem; max-width: 360px; }

/* htmx fade-out when a row is deleted */
.table-row.htmx-swapping { opacity: 0; }

/* ---------- Forms ---------- */

.record-form {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  padding: 1.5rem;
  max-width: 480px;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

/* Read-only detail/view pages (not data-entry forms) should use the
   available screen width instead of the same narrow max-width as an
   input form - a wide monitor was showing >80% empty space next to a
   480-720px card. Data-entry forms keep their own narrower max-width
   (long input rows are harder to scan/use at 1100px) - only pages that
   are mostly viewing information (RFQ/Internal RFQ detail, and future
   vendor quote / customer quotation detail pages) opt into this class.
   `.record-form.detail-view` beats a lone inline max-width or `.record-form`
   alone on specificity, so callers no longer need an inline style override. */
.record-form.detail-view { max-width: 1100px; }

/* Muc 14e - same long-URL wrapping fix as .data-table td, for free-text
   blocks on detail/view pages (raw_body, Notes paragraphs). */
.record-form p { overflow-wrap: anywhere; word-break: break-word; }

.record-form label { font-size: 0.85rem; font-weight: 600; color: var(--color-text-muted); margin-top: 0.5rem; }

.record-form input,
.record-form textarea {
  padding: 0.55rem 0.7rem;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  font-size: 0.95rem;
  font-family: inherit;
  resize: vertical;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.record-form input:focus,
.record-form textarea:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}

.form-actions { display: flex; gap: 0.6rem; margin-top: 1.25rem; }

.section-title { font-size: 1.1rem; font-weight: 600; color: var(--color-text); margin: 2rem 0 1rem; }
.field-group-title { font-size: 0.9rem; font-weight: 600; color: var(--color-text-muted); margin: 1.25rem 0 0.5rem; text-transform: uppercase; letter-spacing: 0.03em; }

/* MASTER v3 Muc 16a - 3-tier inline guidance.
   Tier 1 (plain fields): placeholder + .row-meta caption, no icon needed.
   Tier 2 (security/visibility-sensitive): .info-icon.tier-security.
   Tier 3 (directly affects cost/price math): .required-mark (red *) +
   .info-icon.tier-money - deliberately more visually prominent (bigger,
   bolder border, brighter red) than tier 2 so the two read as distinct
   categories of caution, not the same warning twice. */
.required-mark { color: var(--color-danger); font-weight: 700; }

.info-icon {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.05rem;
  height: 1.05rem;
  border-radius: 50%;
  font-size: 0.68rem;
  font-weight: 700;
  line-height: 1;
  cursor: help;
  margin-left: 0.3rem;
  vertical-align: middle;
  font-style: normal;
}
.info-icon.tier-security { background: #fef3c7; color: #92400e; border: 1px solid #f59e0b; }
.info-icon.tier-money {
  width: 1.2rem; height: 1.2rem; font-size: 0.75rem;
  background: #fee2e2; color: #991b1b; border: 2px solid #dc2626;
}
.info-icon::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: 135%;
  left: 50%;
  transform: translateX(-50%);
  background: #1f2933;
  color: #fff;
  padding: 0.4rem 0.6rem;
  border-radius: 6px;
  font-size: 0.75rem;
  font-weight: 400;
  line-height: 1.3;
  white-space: normal;
  width: max-content;
  max-width: 240px;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition-fast);
  z-index: 30;
}
.info-icon:hover::after, .info-icon:focus::after { opacity: 1; }
.page-description { color: var(--color-text-muted); font-size: 0.9rem; margin: -0.5rem 0 1rem; max-width: 68ch; }

.vendor-checklist {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin-top: 0.4rem;
  margin-bottom: 0.5rem;
  max-height: 260px;
  overflow-y: auto;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  padding: 0.6rem 0.75rem;
}

.vendor-checklist-item { display: flex; align-items: center; gap: 0.5rem; font-size: 0.9rem; font-weight: 400; }
.vendor-checklist-item input { margin-top: 0; }

.rfq-items { display: flex; flex-direction: column; gap: 0.6rem; margin-top: 0.5rem; }

.rfq-items-toolbar { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-top: 0.4rem; }

.rfq-upload-label { cursor: pointer; }
.rfq-upload-label input[type="file"] { display: none; }

.rfq-item-number {
  flex: 0 0 auto;
  min-width: 1.6rem;
  height: 1.6rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--color-border);
  font-size: 0.8rem;
  font-weight: 600;
}

.rfq-item-row {
  border: 1px solid var(--color-border);
  border-radius: 8px;
  padding: 0.75rem;
  min-width: 0;
}

.rfq-item-header {
  display: flex;
  gap: 0.5rem;
  align-items: flex-start;
  margin-bottom: 0.5rem;
}
.rfq-item-header .rfq-item-number { margin-top: 0.15rem; }

.rfq-item-header input { flex: 1; min-width: 0; }

.rfq-item-ref-details { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; }

/* auto-fill wraps fields onto as many rows as needed instead of a fixed
   column count - this (plus min-width: 0 below) is what fixes long notes
   text overflowing the card's fixed-width columns. */
.rfq-item-fields {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: 0.5rem;
}

.rfq-item-field {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
}

.rfq-item-field label {
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--color-text-muted);
  margin-top: 0;
}

.rfq-item-field input,
.rfq-item-field select {
  width: 100%;
  min-width: 0;
  margin-top: 0;
}

.rfq-item-field-notes { grid-column: 1 / -1; }

.rfq-item-row input,
.rfq-item-row select { margin-top: 0; }

.vendor-search-box { margin-bottom: 1rem; }

.search-results {
  margin-top: 0.5rem;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  overflow: hidden;
}

.search-result-item {
  padding: 0.55rem 0.75rem;
  font-size: 0.85rem;
  cursor: pointer;
  border-bottom: 1px solid var(--color-border);
  transition: background var(--transition-fast);
}

.search-result-item:last-child { border-bottom: none; }
.search-result-item:hover { background: var(--color-bg); }
.search-no-results { margin-top: 0.5rem; }

.product-result { cursor: default; }
.product-result:hover { background: transparent; }
.product-result-header {
  font-size: 0.85rem;
  margin-bottom: 0.25rem;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.product-result-header .btn { margin-left: auto; }
.product-history-list { margin: 0; padding-left: 1.1rem; font-size: 0.8rem; color: var(--color-text-muted); }

/* MASTER v3 Muc 15g: bulk product-matching panel, appended below a
   confirmed/pending rfq-item-row once "Run bulk match" has scanned it. */
.match-panel {
  margin-top: 0.6rem;
  padding-top: 0.6rem;
  border-top: 1px dashed var(--color-border);
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.match-panel-header { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.match-suggestion-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.6rem;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  font-size: 0.85rem;
}
.match-suggestion-item .btn { margin-left: auto; }
.match-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; }

/* MASTER v3 Muc 20: Product Detail Tab - image gallery + drawing/catalog
   version groups. */
.product-image-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 0.75rem;
}
.product-image-item {
  border: 1px solid var(--color-border);
  border-radius: 8px;
  padding: 0.4rem;
  text-align: center;
}
.product-image-item img { width: 100%; height: 120px; object-fit: cover; border-radius: 6px; }
.product-image-item form { margin-top: 0.4rem; }

.product-document-group {
  border: 1px solid var(--color-border);
  border-radius: 8px;
  padding: 0.75rem;
  margin-top: 0.6rem;
}
.product-document-current { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.product-document-old-version {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0;
  border-top: 1px dashed var(--color-border);
  flex-wrap: wrap;
}

/* Generic 2+ column field grid for long forms (MASTER v3 Mục 5/14c fix:
   label must sit directly above its own input, not float independently -
   each label+input pair is wrapped in one .form-field grid cell). */
.form-section { margin-top: 1.5rem; padding-top: 1rem; border-top: 1px solid var(--color-border); }
.form-section:first-child { margin-top: 0; padding-top: 0; border-top: none; }
.form-grid-2col { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 0.75rem; margin-top: 0.5rem; }
.form-grid-2col .form-field { min-width: 0; }
.form-grid-2col .form-field label { display: block; font-size: 0.85rem; font-weight: 600; color: var(--color-text-muted); margin-bottom: 0.25rem; }

.form-grid-2col .form-field input,
.form-grid-2col .form-field select {
  width: 100%;
  min-width: 0;
  padding: 0.55rem 0.7rem;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  font-size: 0.95rem;
  font-family: inherit;
}

/* per-cost-field currency picker (MASTER v3 Muc 5/6, confirmed with user) -
   amount input + a small fixed-width currency select side by side. Selector
   matches the real nesting (.form-field > .amount-currency-pair > select) so
   it outweighs the more generic .form-grid-2col .form-field select rule
   above regardless of source order. */
.amount-currency-pair { display: flex; gap: 0.4rem; }
.form-grid-2col .form-field .amount-currency-pair input { flex: 1; min-width: 0; width: auto; }
.form-grid-2col .form-field .amount-currency-pair select { flex: 0 0 auto; width: 5rem; }

/* MASTER v3 Muc 15b - visible to Staff at entry AND Admin at review when a
   chosen payment terms value differs from the linked Vendor/Customer's
   agreed default (not a required-reason case, just needs to be obvious). */
.payment-terms-warning {
  margin-top: 0.5rem;
  padding: 0.5rem 0.75rem;
  border: 1px solid #f97316;
  border-left-width: 4px;
  border-radius: 6px;
  background: #fff7ed;
  color: #9a3412;
  font-size: 0.85rem;
}
.payment-terms-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  margin-left: 0.4rem;
  padding: 0.1rem 0.5rem;
  border: 1px solid #f97316;
  border-radius: 999px;
  background: #fff7ed;
  color: #9a3412;
  font-size: 0.75rem;
  font-weight: 600;
}

.cost-breakdown-toggle { display: inline-flex; align-items: center; gap: 0.35rem; }
.cost-breakdown-panel {
  padding: 0.75rem 1rem;
  background: var(--color-bg-alt, #f8fafc);
  border: 1px solid var(--color-border);
  border-radius: 8px;
}
.cost-breakdown-panel-title { font-weight: 600; margin: 0 0 0.5rem; }
.cost-breakdown-inner { margin-bottom: 0.75rem; }
.cost-breakdown-inner:last-child { margin-bottom: 0; }
.cost-breakdown-inner td { padding: 0.25rem 0.5rem; }
.cost-breakdown-subtotal td { font-weight: 600; border-top: 1px solid var(--color-border); }
.text-right { text-align: right; }

.winner-candidates { display: flex; flex-direction: column; gap: 0.4rem; margin: 0.5rem 0; }
.winner-candidate-option {
  display: flex; align-items: center; gap: 0.5rem;
  padding: 0.5rem 0.75rem; border: 1px solid var(--color-border); border-radius: 8px;
  cursor: pointer; font-weight: normal;
}
.winner-candidate-option.is-selected { border-color: #15803d; background: #f0fdf4; }
.winner-candidate-option input[type="radio"] { flex-shrink: 0; }

.quick-create-material { margin-top: 0.5rem; padding: 0.5rem 0.75rem; border: 1px dashed var(--color-border); border-radius: 8px; }
.quick-create-material label { display: block; font-size: 0.8rem; font-weight: 600; color: var(--color-text-muted); margin-top: 0.4rem; }
.quick-create-material input,
.quick-create-material select {
  width: 100%;
  padding: 0.45rem 0.6rem;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  font-size: 0.9rem;
  font-family: inherit;
  margin-top: 0.15rem;
}

.proposal-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  padding: 1.25rem;
  margin-bottom: 1.25rem;
}

.proposal-card-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}

.proposal-card .data-table { border: 1px solid var(--color-border); border-radius: 8px; overflow: hidden; }
.proposal-card .form-actions { justify-content: flex-end; }

.diff-old { color: var(--color-text-muted); text-decoration: line-through; }
.diff-new { color: #15803d; font-weight: 600; }

/* ---------- Login page ---------- */

.login-body {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-bg);
  position: relative;
}

.login-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  padding: 2rem;
  width: 100%;
  max-width: 360px;
  text-align: center;
}

.login-card h1 { font-size: 1.2rem; margin-bottom: 0.25rem; }
.login-card h2 { font-size: 1rem; color: var(--color-text-muted); font-weight: 500; margin-top: 0; margin-bottom: 1.25rem; }

.login-form { display: flex; flex-direction: column; gap: 0.35rem; text-align: left; }
.login-form label { font-size: 0.85rem; font-weight: 600; color: var(--color-text-muted); margin-top: 0.5rem; }
.login-form input { padding: 0.6rem 0.7rem; border: 1px solid var(--color-border); border-radius: 8px; font-size: 0.95rem; }
.login-form .btn { margin-top: 1.25rem; }

.alert { padding: 0.6rem 0.8rem; border-radius: 8px; font-size: 0.85rem; margin-bottom: 1rem; }
.alert-error { background: #fee2e2; color: var(--color-danger); }
/* MASTER v3 Muc 23.2 - soft "possible duplicate" warning, never blocks
   submission (unlike .alert-error's hard-block use elsewhere) - same
   amber palette as .payment-terms-warning for a consistent "heads up, not
   an error" visual language. */
.alert-warning { background: #fff7ed; color: #9a3412; border: 1px solid #f97316; }
.alert-success { background: #dcfce7; color: #15803d; }

/* ---------- Responsive / mobile ---------- */

@media (max-width: 800px) {
  .burger { display: block; }

  .sidebar {
    position: fixed;
    top: var(--topbar-height);
    left: 0;
    bottom: 0;
    transform: translateX(-100%);
    transition: transform var(--transition-medium);
    z-index: 15;
    box-shadow: 2px 0 8px rgba(0, 0, 0, 0.08);
  }

  .sidebar.open { transform: translateX(0); }

  .data-table thead { display: none; }
  .data-table, .data-table tbody, .data-table tr, .data-table td { display: block; width: 100%; }
  .data-table tr { border-bottom: 1px solid var(--color-border); padding: 0.5rem 0; }
  .data-table td {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    border-bottom: none;
    padding: 0.35rem 1rem;
  }
  .data-table td::before {
    content: attr(data-label);
    font-weight: 600;
    color: var(--color-text-muted);
  }
  .actions-cell { justify-content: flex-end; }
}

/* ---------- Reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* ---------- Print (Internal RFQ "PDF form") ---------- */

@media print {
  .topbar, .sidebar, .no-print { display: none !important; }
  .app-body { display: block !important; }
  .content { padding: 0 !important; }
  .print-area { border: none !important; box-shadow: none !important; max-width: 100% !important; }
  body { background: #fff !important; }
}