/* ── Design tokens ─────────────────────────────────────────────────────────── */
:root {
  --bg:           #F5F7FA;
  --surface:      #FFFFFF;
  --surface-soft: #F9FAFB;
  --text:         #1E293B;
  --text-main:    #1E293B;
  --muted:        #5B7C99;
  --border:       #D9E2E7;
  --border-light: #eaecef;
  --primary:      #1DA1F2;
  --primary-dark: #0D8BE0;
  --primary-soft: #E8F4FD;
  --accent:       #1DA1F2;
  --accent-soft:  rgba(29,161,242,0.10);
  --bg-light:     #f5f7fb;
  --shadow-card:  0 2px 8px rgba(0,0,0,0.05);
  --radius-card:  12px;
  --radius-input: 10px;
  --radius-btn:   10px;
}

/* ── Reset & Base ──────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, sans-serif;
  font-size: 14px;
  line-height: 1.5;
  color: #1E293B;
  background: #F5F7FA;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* ── Header ────────────────────────────────────────────────────────────────── */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
}

/* ── Top bar: white, logo + actions ─────────────────────────────────────── */
.header-top {
  background: #ffffff;
  border-bottom: 1px solid #D9E2E7;
  padding: 0 28px;
  min-height: 84px;
  height: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* ── Nav bar: Smartify blue, breadcrumb ─────────────────────────────────── */
.header-nav {
  background: #1DA1F2;
  padding: 0 32px;
  height: 40px;
  display: flex;
  align-items: center;
}

.header-inner {
  display: flex;
  align-items: center;
  gap: 16px;
}

.logo {
  font-size: 21px;
  font-weight: 600;
  color: #1DA1F2;
  text-decoration: none;
  letter-spacing: -0.3px;
  display: flex;
  align-items: center;
  height: 84px;
  background: none;
  border-radius: 0;
  padding: 0;
  box-shadow: none;
  margin-right: 20px;
}

.site-logo {
  height: 64px !important;
  width: auto !important;
  max-height: none !important;
  max-width: none !important;
  object-fit: contain;
  display: block;
}

.header-sub {
  color: rgba(255,255,255,0.65);
  font-size: 13px;
}

.header-breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
}

.breadcrumb-link {
  color: rgba(255,255,255,0.88);
  text-decoration: none;
  font-weight: 600;
}

.breadcrumb-link:hover {
  text-decoration: underline;
  color: #ffffff;
}

.breadcrumb-sep {
  color: rgba(255,255,255,0.45);
  font-size: 14px;
  line-height: 1;
}

.breadcrumb-current {
  color: #FFFFFF;
  font-weight: 600;
}

.header-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-shrink: 0;
}

/* ── Header buttons — brand colors on white top bar ─────────────────────── */
.header-top .btn-outline {
  background: transparent;
  color: #1DA1F2 !important;
  border-color: #1DA1F2 !important;
}
.header-top .btn-outline:hover {
  background: rgba(29,161,242,0.07) !important;
}
.header-top .btn-primary {
  background: #1DA1F2 !important;
  color: #FFFFFF !important;
  border-color: #1DA1F2 !important;
}
.header-top .btn-primary:hover {
  background: #0D8BE0 !important;
  border-color: #0D8BE0 !important;
}

/* ── Container ─────────────────────────────────────────────────────────────── */
.container {
  max-width: 960px;
  margin: 0 auto;
  padding: 32px 24px;
  flex: 1;
}

/* Result / dashboard pages: full-width desktop layout */
.result-container {
  max-width: min(96vw, 1520px);
  box-sizing: border-box;
}

/* ── Page title ─────────────────────────────────────────────────────────────── */
.page-title { margin-bottom: 28px; }
.page-title h1 { font-size: 24px; font-weight: 700; color: #1E293B; }
.page-title .subtitle { color: #6b7280; margin-top: 4px; }

/* ── Form ───────────────────────────────────────────────────────────────────── */
.offer-form { display: flex; flex-direction: column; gap: 24px; }

.form-section {
  background: #fff;
  border: 1px solid #D9E2E7;
  border-radius: 16px;
  padding: 24px;
  box-shadow: 0 8px 24px rgba(15,23,42,0.04);
}

.form-section h2 {
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #6b7280;
  margin-bottom: 16px;
  padding-bottom: 10px;
  border-bottom: 1px solid #f0f2f8;
}

.field-row {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.field-row label {
  font-size: 13px;
  font-weight: 500;
  color: #374151;
}

.field-row input[type="text"],
.field-row input[type="number"],
.field-row select {
  border: 1px solid #D1D5DB;
  border-radius: 10px;
  padding: 8px 10px;
  font-size: 14px;
  color: #1E293B;
  background: #fff;
  transition: border-color 0.15s, box-shadow 0.15s;
  width: 100%;
}

.field-row input:focus,
.field-row select:focus {
  outline: none;
  border-color: #1DA1F2;
  box-shadow: 0 0 0 3px rgba(29,161,242,0.12);
}

.field-row input[type="number"] { max-width: 120px; }

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; }

.form-actions { display: flex; justify-content: flex-end; padding-top: 4px; }

/* ── Buttons ─────────────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 18px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  border: 1px solid transparent;
  transition: background 0.15s, border-color 0.15s, box-shadow 0.15s;
  min-height: 38px;
}

.btn.large { padding: 10px 22px; font-size: 14px; }

.btn-primary {
  background: #1DA1F2;
  color: #fff;
  border-color: #1DA1F2;
}
.btn-primary:hover { background: #0D8BE0; border-color: #0D8BE0; }

.btn-outline {
  background: #fff;
  color: #1E293B;
  border-color: #D9E2E7;
}
.btn-outline:hover { background: #F9FAFB; border-color: #D1D5DB; }

/* ── Result sections ─────────────────────────────────────────────────────────── */
.result-section {
  background: #fff;
  border: 1px solid #D9E2E7;
  border-radius: 16px;
  padding: 28px;
  margin-bottom: 24px;
  box-shadow: 0 8px 24px rgba(15,23,42,0.04);
}

.result-section h2 {
  font-size: 17px;
  font-weight: 700;
  color: #1E293B;
  margin-bottom: 20px;
}

.subsection-title {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #6b7280;
  margin: 20px 0 10px;
}

/* ── Brand header ────────────────────────────────────────────────────────────── */
.brand-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.brand-header h2 { margin-bottom: 0; }

.brand-total {
  margin-left: auto;
  font-size: 20px;
  font-weight: 700;
  color: #1E293B;
}

/* ── Result hero block ───────────────────────────────────────────────────────── */
.result-hero {
  background: #fff;
  border: 1px solid #D9E2E7;
  border-radius: 16px;
  padding: 24px 28px 20px;
  margin-bottom: 20px;
  box-shadow: 0 8px 24px rgba(15,23,42,0.04);
}
.result-hero-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.result-hero-title {
  font-size: 22px;
  font-weight: 700;
  color: #1E293B;
  letter-spacing: -0.3px;
  line-height: 1.2;
}
.result-hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}
.result-hero-badge {
  font-size: 11px;
  font-weight: 600;
  padding: 3px 9px;
  border-radius: 20px;
  background: #E8F4FD;
  color: #0d6fa6;
  border: 1px solid #b3d9f2;
  letter-spacing: 0.3px;
  text-transform: uppercase;
}
.result-hero-badge.badge-grey {
  background: #f1f5f9;
  color: #64748b;
  border-color: #e2e8f0;
}
.result-hero-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: flex-start;
  flex-shrink: 0;
}
.result-hero-stats {
  display: flex;
  gap: 24px;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid #f1f5f9;
  flex-wrap: wrap;
}
.result-hero-stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.result-hero-stat-label {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: #94a3b8;
}
.result-hero-stat-value {
  font-size: 20px;
  font-weight: 700;
  color: #1E293B;
}
.result-hero-stat-value.accent { color: #1DA1F2; }
.result-hero-nav {
  display: flex;
  gap: 6px;
  margin-top: 16px;
  flex-wrap: wrap;
}
.result-hero-nav-link {
  font-size: 12px;
  font-weight: 500;
  color: #4b5563;
  text-decoration: none;
  padding: 5px 12px;
  border-radius: 6px;
  border: 1px solid #e2e8f0;
  background: #f8fafc;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
  white-space: nowrap;
}
.result-hero-nav-link:hover {
  background: #E8F4FD;
  border-color: #b3d9f2;
  color: #0d6fa6;
}
@media (max-width: 640px) {
  .result-hero { padding: 16px; }
  .result-hero-title { font-size: 18px; }
  .result-hero-stat-value { font-size: 17px; }
  .result-hero-actions { gap: 6px; }
  .result-hero-stats { gap: 14px; margin-top: 14px; }
}

/* ── Summary grid ─────────────────────────────────────────────────────────────── */
.summary-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 14px;
  margin-bottom: 20px;
}

.summary-card {
  background: #f7f8fc;
  border: 1px solid #e2e6ef;
  border-radius: 8px;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.summary-label { font-size: 11px; font-weight: 600; text-transform: uppercase; color: #6b7280; letter-spacing: 0.4px; }
.summary-value { font-size: 17px; font-weight: 700; color: #1E293B; }

/* ── Pill row ─────────────────────────────────────────────────────────────────── */
.pill-row { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.pill {
  background: #E8F4FD;
  color: #1E293B;
  border: 1px solid #D9E2E7;
  border-radius: 20px;
  padding: 4px 12px;
  font-size: 12px;
  font-weight: 500;
}

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

.data-table thead tr {
  background: #f7f8fc;
}

.data-table th {
  text-align: left;
  padding: 9px 12px;
  font-weight: 600;
  color: #374151;
  border-bottom: 2px solid #e2e6ef;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.data-table td {
  padding: 9px 12px;
  border-bottom: 1px solid #f0f2f8;
  color: #374151;
  vertical-align: middle;
}

.data-table tr:last-child td { border-bottom: none; }
.data-table.narrow { max-width: 420px; }
.num { text-align: right !important; font-variant-numeric: tabular-nums; }

.name-cell { max-width: 280px; }
.sku-cell  { color: #6b7280; font-size: 12px; }

/* Section header rows (BOM grouping) */
.section-header-row td {
  background: #f0f2f8;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #6b7280;
  padding: 6px 12px;
  border-bottom: 1px solid #e2e6ef;
}

/* BOM row status colours */
.row-missing td { background: #fff5f5; color: #b91c1c; }
.row-missing td.name-cell { font-style: italic; }
.row-external td { background: #fffbeb; color: #92400e; }

.price-cell { font-weight: 600; color: #1E293B; }
.empty-msg { color: #9ca3af; text-align: center; padding: 20px; }

/* ── Badges ───────────────────────────────────────────────────────────────────── */
.badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.3px;
}

.badge-complete   { background: #E8F4FD; color: #1DA1F2; border: 1px solid #A8D5F5; }
.badge-incomplete { background: #fef3c7; color: #92400e; border: 1px solid #fcd34d; }

/* ── Alerts ───────────────────────────────────────────────────────────────────── */
.alert {
  border-radius: 7px;
  padding: 12px 16px;
  font-size: 13px;
  margin-bottom: 16px;
}

.alert-warn { background: #FFF7ED; border: 1px solid #FDBA74; color: #9A3412; }

/* ── Comparison ───────────────────────────────────────────────────────────────── */
.comparison-table { margin-bottom: 20px; }

.comparison-result {
  background: #E8F4FD;
  border: 1px solid #A8D5F5;
  border-radius: 8px;
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.comp-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 14px;
}

.cheaper-badge {
  background: #E8F4FD;
  color: #1DA1F2;
  padding: 4px 14px;
  border-radius: 14px;
  font-size: 13px;
  font-weight: 700;
}

/* ── Export section ──────────────────────────────────────────────────────────── */
.export-section { background: #f7f8fc; }
.export-row { display: flex; gap: 12px; flex-wrap: wrap; }

/* ── Footer ─────────────────────────────────────────────────────────────────── */
.site-footer {
  text-align: center;
  padding: 20px;
  color: #9ca3af;
  font-size: 12px;
  border-top: 1px solid #e2e6ef;
  background: #fff;
}

/* ── Pricing block ───────────────────────────────────────────────────────────── */
.pricing-block {
  margin-top: 24px;
  border-top: 2px solid #e2e6ef;
  padding-top: 20px;
}

.pricing-title {
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: #374151;
  margin-bottom: 12px;
}

.pricing-title .incomplete-note {
  font-size: 11px;
  font-weight: 400;
  text-transform: none;
  color: #92400e;
}

.pricing-table { max-width: 560px; }

.pricing-row-hw td  { background: #f7f8fc; }
.pricing-row-markup td { color: #1E293B; }
.pricing-row-discount td { color: #1DA1F2; }

.pricing-row-subtotal td {
  border-top: 1px solid #d1d5db;
  border-bottom: 1px solid #d1d5db;
  background: #f0f2f8;
}

.pricing-row-total td {
  background: #1DA1F2;
  color: #fff;
  font-weight: 700;
  border-radius: 0;
}

.offer-total {
  font-size: 16px;
  font-weight: 700;
  color: #fff;
}

.text-muted { color: #9ca3af !important; font-size: 11px; }

/* ── Comparison offer price column ──────────────────────────────────────────── */
.offer-price { font-size: 15px; font-weight: 700; color: #1DA1F2; }
.incomplete-note { color: #b45309; font-weight: 700; }
.incomplete-note-text {
  font-size: 12px;
  color: #92400e;
  margin-top: 6px;
  margin-bottom: 0;
}

/* ── Form: section hint & full-span ─────────────────────────────────────────── */
.section-hint {
  font-size: 12px;
  color: #6b7280;
  margin-bottom: 16px;
  line-height: 1.5;
}

.full-span { grid-column: 1 / -1; }

/* ── Architecture card (RCU vs Generic) ──────────────────────────────────────── */
.arch-card {
  border: 1px solid #d1d5db;
  border-radius: 8px;
  margin: 16px 0 20px;
  overflow: hidden;
}

.arch-card.arch-rcu_preferred { border-color: #1DA1F2; }
.arch-card.arch-generic_modules { border-color: #9ca3af; }

.arch-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  background: #F0FAFB;
  border-bottom: 1px solid #d1d5db;
  flex-wrap: wrap;
}

.arch-card.arch-generic_modules .arch-header { background: #f9fafb; }

.arch-badge {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: 4px;
  white-space: nowrap;
}

.arch-rcu_preferred .arch-badge {
  background: #1DA1F2;
  color: #fff;
}

.arch-generic_modules .arch-badge {
  background: #6b7280;
  color: #fff;
}

.arch-model {
  font-weight: 600;
  font-size: 13px;
  color: #1E293B;
}

.arch-reason {
  font-size: 12px;
  color: #4b5563;
  flex: 1;
}

.arch-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 0;
  border-bottom: 1px solid #D9E2E7;
}

.arch-stat {
  padding: 10px 16px;
  border-right: 1px solid #D9E2E7;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.arch-stat:last-child { border-right: none; }

.arch-label {
  font-size: 11px;
  color: #6b7280;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

.arch-value {
  font-size: 13px;
  font-weight: 600;
  color: #1E293B;
}

.arch-price-compare {
  display: flex;
  align-items: stretch;
  background: #fff;
}

.arch-price-item {
  flex: 1;
  padding: 10px 16px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  border-right: 1px solid #D9E2E7;
}
.arch-price-item:last-child { border-right: none; }

.arch-price-item span {
  font-size: 11px;
  color: #6b7280;
}

.arch-price-item strong {
  font-size: 15px;
  font-weight: 700;
  color: #374151;
}

.arch-price-item.arch-winner strong {
  color: #1DA1F2;
}

.arch-price-item.arch-winner {
  background: #E8F4FD;
}

/* Row tags: RCU rows get blue tint; RCU-SUPP get lighter blue */
.bom-table tr.row-ok td:first-child::before { content: ""; }

/* ── Responsive ─────────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  .grid-2, .grid-3 { grid-template-columns: 1fr; }
  .brand-header { flex-direction: column; align-items: flex-start; }
  .brand-total { margin-left: 0; }
  .container { padding: 20px 16px; }
  .result-container { padding: 16px 12px; }
  .header-top { padding: 0 16px; }
  .header-nav { padding: 0 16px; }
  .bom-table .sku-cell, .bom-table th:nth-child(4), .bom-table td:nth-child(4) { display: none; }
  .arch-price-compare { flex-direction: column; }
  .arch-price-item { border-right: none; border-bottom: 1px solid #D9E2E7; }
  .discount-block { margin-top: 20px; }
}

/* ── Discount comparison block ──────────────────────────────────────────────── */
.discount-block {
  margin-top: 28px;
  background: #F9FAFB;
  border: 1px solid #D9E2E7;
  border-radius: 16px;
  padding: 20px 24px;
  box-shadow: 0 8px 24px rgba(15,23,42,0.04);
}

.discount-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}

.discount-title {
  font-size: 15px;
  font-weight: 600;
  color: #1E293B;
  margin: 0;
}

.discount-partial-badge {
  background: #fef3c7;
  color: #92400e;
  border: 1px solid #fcd34d;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 10px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.discount-partial-note {
  font-size: 12px;
  color: #92400e;
  background: #fffbeb;
  border: 1px solid #fcd34d;
  border-radius: 6px;
  padding: 8px 12px;
  margin-bottom: 14px;
}

.discount-table { margin-bottom: 10px; }

.discount-row-list td {
  background: #f1f5f9;
  color: #1E293B;
}

.discount-row td { color: #334155; }

.discount-value {
  color: #1E293B;
  font-weight: 600;
}

.discount-saving {
  color: #1DA1F2;
  font-weight: 500;
}

.discount-label-note {
  font-size: 11px;
  color: #64748b;
  font-weight: 400;
  margin-left: 4px;
}

.discount-footnote {
  font-size: 11px;
  color: #94a3b8;
  margin: 8px 0 0;
  font-style: italic;
}

.text-muted { color: #94a3b8; }

/* ── Sell-grid: comparison table (purchase + selling price by tier) ────────── */
.sell-grid { table-layout: auto; }

.sell-grid .sg-label { width: 42%; }

.sell-grid .sg-tier {
  min-width: 120px;
  background: #E8F4FD;
  font-size: 12px;
  font-weight: 700;
  color: #1DA1F2;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.sell-grid small {
  font-size: 10px;
  font-weight: 400;
  color: #6b7280;
  display: block;
}

.sg-section td {
  background: #1DA1F2;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 5px 10px;
}

.sg-list-row td {
  background: #f8fafc;
  color: #64748b;
  font-style: italic;
  font-size: 12px;
}

.sg-disc { color: #1E293B; font-weight: 600; }
.sg-save { color: #1DA1F2; font-weight: 500; }

.sg-base-row td {
  background: #f1f5f9;
  font-weight: 600;
  color: #1E293B;
  border-top: 2px solid #cbd5e1;
}

.sg-sell-row td {
  background: #E8F4FD;
}

.sg-sell {
  color: #1E293B;
  font-weight: 700;
  font-size: 14px;
}

.sg-sell-vat {
  color: #1DA1F2;
  font-weight: 700;
  font-size: 15px;
}

.sg-profit-row td {
  background: #E8F4FD;
  border-top: 2px solid #A8D5F5;
}

.sg-profit {
  color: #1DA1F2;
  font-weight: 700;
}

/* ── Gross profit % row ─────────────────────────────────────────────────────── */
.sg-pct-row td { background: #E8F4FD; }
.sg-pct { color: #1DA1F2; font-weight: 700; font-size: 13px; }

/* ── Purchase → gross selling difference rows ───────────────────────────────── */
.sg-ptg-row td {
  background: #fffbeb;
  border-top: 1px dashed #fbbf24;
}
.sg-ptg { color: #92400e; font-weight: 700; }

/* ── Main profitability comparison section ───────────────────────────────────── */
.section-sub {
  font-size: 13px;
  color: #64748b;
  margin: -8px 0 18px;
}

.profit-compare-table { width: 100%; }

.profit-compare-table .pc-label { width: 48%; }

.profit-compare-table .pc-col {
  min-width: 140px;
  background: #E8F4FD;
  font-size: 12px;
  font-weight: 700;
  color: #1DA1F2;
  text-align: right;
  padding: 8px 12px;
}

.profit-compare-table .pc-partial { color: #dc2626; font-size: 10px; }

.pc-purchase-row td { background: #E8F4FD; }
.pc-purchase { color: #1E293B; font-weight: 700; font-size: 14px; }

/* ── Save button ─────────────────────────────────────────────────────────────── */
.btn-save {
  background: #1DA1F2;
  color: #fff;
  border: 2px solid #1DA1F2;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.btn-save:hover {
  background: #1DA1F2;
  border-color: #1DA1F2;
  color: #fff;
  text-decoration: none;
}

/* ── Saved / opened confirmation banners ────────────────────────────────────── */
.save-banner {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 18px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 20px;
}
.save-banner-ok {
  background: #E8F4FD;
  color: #1DA1F2;
  border: 1px solid #A8D5F5;
}
.save-banner-opened {
  background: #E8F4FD;
  color: #1DA1F2;
  border: 1px solid #D9E2E7;
}
.save-banner-link {
  margin-left: auto;
  font-weight: 700;
  text-decoration: underline;
  color: inherit;
}
.save-banner-link:hover { opacity: 0.75; }

/* ── PDF download button ─────────────────────────────────────────────────────── */
.btn-pdf {
  background: #1DA1F2;
  color: #fff;
  border: 2px solid #009EB8;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.btn-pdf:hover {
  background: #009EB8;
  border-color: #0089A0;
  color: #fff;
  text-decoration: none;
}

@media (max-width: 700px) {
  .sell-grid .sg-tier { min-width: 90px; font-size: 11px; }
  .sg-sell { font-size: 13px; }
  .sg-sell-vat { font-size: 13px; }
  .profit-compare-table .pc-col { min-width: 100px; font-size: 11px; }
}

/* ── PDF Upload Card ──────────────────────────────────────────────────────── */
.pdf-upload-card {
  background: #E8F4FD;
  border: 1px dashed #D9E2E7;
  border-radius: 16px;
  padding: 18px 22px;
  margin-bottom: 0;
}

.pdf-upload-header {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 14px;
}

.pdf-upload-icon {
  font-size: 22px;
  line-height: 1;
  flex-shrink: 0;
  margin-top: 2px;
}

.pdf-upload-header strong {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: #1E293B;
}

.pdf-upload-hint {
  font-size: 12px;
  color: #6B7280;
  margin-top: 2px;
  display: block;
}

.pdf-upload-form { display: flex; flex-direction: column; gap: 8px; }

.pdf-upload-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.pdf-file-input {
  flex: 1;
  min-width: 0;
  font-size: 13px;
  color: #374151;
}

.btn-pdf-upload {
  background: #1DA1F2;
  color: #fff;
  border: 1px solid #1DA1F2;
  white-space: nowrap;
}
.btn-pdf-upload:hover { background: #0D8BE0; border-color: #0D8BE0; }

.pdf-field-error {
  font-size: 12px;
  color: #b91c1c;
  margin: 0;
}

/* ── Form divider ─────────────────────────────────────────────────────────── */
.form-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 18px 0 6px;
  color: #9ca3af;
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.form-divider::before,
.form-divider::after {
  content: "";
  flex: 1;
  border-top: 1px solid #D9E2E7;
}

/* ── PDF Result Banner ────────────────────────────────────────────────────── */
.pdf-result-banner {
  background: #fffbeb;
  border: 1px solid #fcd34d;
  border-radius: 10px;
  padding: 16px 20px;
  margin-bottom: 0;
}

.pdf-result-banner.pdf-banner-error {
  background: #fff5f5;
  border-color: #fca5a5;
}

.pdf-banner-top {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.pdf-banner-icon {
  font-size: 18px;
  line-height: 1;
  flex-shrink: 0;
  margin-top: 2px;
}

.pdf-banner-text {
  flex: 1;
}

.pdf-banner-text strong {
  font-size: 13px;
  font-weight: 700;
  color: #78350f;
  display: block;
}

.pdf-banner-error .pdf-banner-text strong { color: #b91c1c; }

.pdf-banner-text p {
  font-size: 12px;
  color: #92400e;
  margin: 4px 0 0;
  line-height: 1.5;
}

.pdf-banner-reset { flex-shrink: 0; }

/* Notes list */
.pdf-notes {
  margin: 12px 0 0 28px;
  padding: 0;
  list-style: disc;
}
.pdf-notes li {
  font-size: 12px;
  color: #78350f;
  margin-bottom: 4px;
  line-height: 1.5;
}
.pdf-banner-error .pdf-notes li { color: #b91c1c; }

/* Extracted summary tags */
.pdf-extracted-summary { margin-top: 14px; }

.pdf-summary-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 8px;
}

.pdf-tag {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 500;
}

/* Confidence colour variants for tags */
.pdf-tag.conf-high   { background: #E8F4FD; color: #1DA1F2; border: 1px solid #A8D5F5; }
.pdf-tag.conf-medium { background: #fef9c3; color: #854d0e; border: 1px solid #fde047; }
.pdf-tag.conf-low    { background: #ffe4e6; color: #9f1239; border: 1px solid #fca5a5; }
.pdf-tag.conf-none   { background: #f3f4f6; color: #6b7280; border: 1px solid #d1d5db; }

.pdf-tag-empty {
  font-size: 12px;
  color: #6b7280;
  font-style: italic;
}

.pdf-conf-legend {
  font-size: 11px;
  color: #9ca3af;
  margin: 0;
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  align-items: center;
}
.pdf-conf-legend::before { content: "Legenda:"; font-weight: 500; margin-right: 2px; }

/* ── Confidence badges in field labels ────────────────────────────────────── */
.conf-badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 600;
  padding: 1px 7px;
  border-radius: 8px;
  vertical-align: middle;
  margin-left: 5px;
  letter-spacing: 0.2px;
  text-transform: uppercase;
}

.conf-badge-high   { background: #E8F4FD; color: #1DA1F2; border: 1px solid #A8D5F5; }
.conf-badge-medium { background: #fef9c3; color: #854d0e; border: 1px solid #fde047; }
.conf-badge-low    { background: #ffe4e6; color: #9f1239; border: 1px solid #fca5a5; }

@media (max-width: 640px) {
  .pdf-upload-row { flex-direction: column; align-items: stretch; }
  .pdf-file-input { width: 100%; }
  .pdf-banner-top { flex-wrap: wrap; }
  .pdf-banner-reset { width: 100%; margin-top: 8px; }
}

/* ── Multi-unit selection screen ──────────────────────────────────────────── */

.units-strategy-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #F0FAFB;
  border: 1px solid #D9E2E7;
  border-radius: 8px;
  padding: 11px 16px;
  font-size: 13px;
  color: #1E293B;
  margin-bottom: 14px;
}

.units-strategy-icon { font-size: 16px; flex-shrink: 0; }

.units-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
  margin-bottom: 20px;
}

/* ── Unit card ──────────────────────────────────────────────────────────────── */
.unit-card {
  background: #fff;
  border: 1px solid #D9E2E7;
  border-radius: 16px;
  padding: 16px;
  box-shadow: 0 8px 24px rgba(15,23,42,0.04);
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: border-color 0.15s, opacity 0.15s;
}

.unit-card:not(.unit-card-empty):not(.unit-card-unchecked) {
  border-color: #1DA1F2;
  box-shadow: 0 0 0 2px rgba(29,161,242,0.12);
}

.unit-card-empty {
  border-color: #D9E2E7;
  background: #fafafa;
}

.unit-card-unchecked {
  opacity: 0.45;
  border-color: #D9E2E7 !important;
  box-shadow: none !important;
}

/* Card header */
.unit-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.unit-checkbox-label {
  display: flex;
  align-items: center;
  gap: 7px;
  cursor: pointer;
}

.unit-checkbox-label input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: #1DA1F2;
  cursor: pointer;
}

.unit-checkbox-text {
  font-size: 12px;
  font-weight: 600;
  color: #374151;
}

/* Confidence badge */
.unit-conf-badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  padding: 2px 8px;
  border-radius: 8px;
}

.unit-conf-high   { background: #E8F4FD; color: #1DA1F2; border: 1px solid #A8D5F5; }
.unit-conf-medium { background: #fef9c3; color: #854d0e; border: 1px solid #fde047; }
.unit-conf-low    { background: #ffe4e6; color: #9f1239; border: 1px solid #fca5a5; }

/* Unit name row */
.unit-name-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.unit-name-input {
  flex: 1;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  padding: 6px 10px;
  font-size: 14px;
  font-weight: 600;
  color: #1E293B;
  background: #f9fafb;
}

.unit-name-input:focus {
  outline: none;
  border-color: #1DA1F2;
  box-shadow: 0 0 0 2px rgba(29,161,242,0.12);
  background: #fff;
}

.unit-page-hint {
  font-size: 11px;
  color: #9ca3af;
  white-space: nowrap;
  flex-shrink: 0;
}

/* No data state */
.unit-no-data {
  font-size: 12px;
  color: #9ca3af;
  font-style: italic;
  margin: 0;
}

/* Summary chip rows */
.unit-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.unit-summary-wt { margin-top: -4px; }

.unit-chip {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 500;
}

.chip-conf-high   { background: #E8F4FD; color: #1DA1F2; border: 1px solid #A8D5F5; }
.chip-conf-medium { background: #fef9c3; color: #854d0e; border: 1px solid #fde047; }
.chip-conf-low    { background: #ffe4e6; color: #9f1239; border: 1px solid #fca5a5; }
.chip-conf-none,
.chip-neutral     { background: #f3f4f6; color: #374151; border: 1px solid #d1d5db; }

/* Strategy note */
.unit-strategy-note {
  font-size: 11px;
  color: #9ca3af;
  margin: 0;
}

/* Unit notes */
.unit-notes {
  margin: 0 0 0 14px;
  padding: 0;
  list-style: disc;
}
.unit-notes li {
  font-size: 11px;
  color: #92400e;
  margin-bottom: 2px;
  line-height: 1.4;
}

/* Legend */
.units-legend {
  font-size: 11px;
  color: #9ca3af;
  line-height: 1.7;
  margin-bottom: 20px;
}

/* Action bar */
.units-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding-top: 4px;
}

.units-actions-right {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.units-import-hint {
  font-size: 12px;
  color: #6b7280;
}

/* ── Quick actions bar ────────────────────────────────────────────────────── */

.quick-actions-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  background: #F0FAFB;
  border: 1px solid #D9E2E7;
  border-radius: 10px;
  padding: 12px 16px;
  margin-bottom: 24px;
}

.quick-actions-label {
  font-size: 12px;
  font-weight: 700;
  color: #374151;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  margin-right: 4px;
  flex-shrink: 0;
}

.btn-submit-manual {
  margin-left: auto;
}

/* ── Section headers ──────────────────────────────────────────────────────── */

.units-section {
  margin-bottom: 28px;
}

.units-section-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 2px solid #D9E2E7;
}

.units-section-title {
  font-size: 15px;
  font-weight: 700;
  color: #1E293B;
}

.units-section-title-review {
  color: #92400e;
}

.units-section-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  background: #1DA1F2;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  border-radius: 11px;
  padding: 0 6px;
  flex-shrink: 0;
}

.units-section-count-review {
  background: #d97706;
}

.units-section-subtitle {
  font-size: 11px;
  color: #9ca3af;
  margin-left: 2px;
}

.units-section-review .units-section-header {
  border-color: #fde68a;
}

/* ── Review card variant ─────────────────────────────────────────────────── */

.unit-card-review {
  background: #fffbeb;
  border-color: #fde68a;
  opacity: 0.9;
}

.unit-card-review.unit-card-unchecked {
  opacity: 0.35;
}

/* ── Best badge ───────────────────────────────────────────────────────────── */

.unit-card-badges {
  display: flex;
  align-items: center;
  gap: 5px;
}

.unit-best-badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 8px;
  background: #fef9c3;
  color: #854d0e;
  border: 1px solid #fbbf24;
  white-space: nowrap;
}

/* ── Low-confidence warning (inside card) ─────────────────────────────────── */

.unit-low-conf-warn {
  background: #fff7ed;
  border: 1px solid #fdba74;
  border-radius: 6px;
  padding: 6px 10px;
  font-size: 11px;
  color: #9a3412;
}

/* ── Import note banner (on index.html after import) ──────────────────────── */
.pdf-import-note-banner {
  background: #E8F4FD;
  border: 1px solid #A8D5F5;
  border-radius: 8px;
  padding: 12px 16px;
  font-size: 13px;
  color: #1DA1F2;
  margin-bottom: 0;
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.pdf-import-note-banner strong { font-weight: 700; }

/* ── BOM edit page ─────────────────────────────────────────────────────────── */
.bom-edit-wrap {
  overflow-x: auto;
  margin-bottom: 24px;
}
.bom-edit-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.bom-edit-table th {
  background: #f1f5f9;
  border-bottom: 2px solid #cbd5e1;
  padding: 8px 6px;
  text-align: left;
  font-weight: 600;
  color: #374151;
  white-space: nowrap;
}
.bom-edit-table th.num, .bom-edit-table td.num { text-align: right; }
.bom-edit-table td {
  padding: 6px 6px;
  border-bottom: 1px solid #D9E2E7;
  vertical-align: middle;
}
.bom-edit-table .bom-edit-row:hover { background: #f8fafc; }
.bom-num-input {
  width: 80px;
  padding: 4px 6px;
  border: 1px solid #cbd5e1;
  border-radius: 5px;
  font-size: 13px;
  text-align: right;
}
.bom-num-input:focus { outline: none; border-color: #1DA1F2; }
.del-cell { text-align: center; }
.del-label { cursor: pointer; display: inline-flex; align-items: center; gap: 3px; }
.del-cb { display: none; }
.del-icon { font-size: 15px; color: #9ca3af; transition: color .15s; }
.del-label:hover .del-icon { color: #ef4444; }
.del-cb:checked + .del-icon { color: #ef4444; }
.cell-text { display: block; }
.row-total { font-weight: 600; color: #1DA1F2; }
.status-chip {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 5px;
  border-radius: 3px;
  text-transform: uppercase;
  background: #D9E2E7; color: #374151;
}
.status-chip.status-ok       { background: #E8F4FD; color: #1DA1F2; }
.status-chip.status-external { background: #fef3c7; color: #92400e; }
.status-chip.status-missing  { background: #fee2e2; color: #991b1b; }
.status-chip.status-optional { background: #F3F4F6; color: #6B7280; }

/* Add-new-item section */
.bom-new-section {
  background: #F9FAFB;
  border: 1px solid #D9E2E7;
  border-radius: 16px;
  padding: 20px 22px;
  margin-bottom: 22px;
}
.bom-new-section h3 {
  font-size: 14px;
  font-weight: 700;
  color: #1E293B;
  margin: 0 0 6px;
}
.bom-new-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 14px;
}
.bom-new-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1 1 140px;
}
.bom-new-field--wide   { flex: 2 1 200px; }
.bom-new-field--narrow { flex: 0 1 90px; }
.bom-new-field label {
  font-size: 11px;
  font-weight: 600;
  color: #6b7280;
  text-transform: uppercase;
  letter-spacing: .4px;
}
.bom-new-field input,
.bom-new-field select {
  padding: 6px 8px;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  font-size: 13px;
  background: #fff;
}
.bom-new-field input:focus, .bom-new-field select:focus {
  outline: none; border-color: #1DA1F2;
}
.req { color: #ef4444; }
.new-total {
  font-size: 14px;
  font-weight: 700;
  color: #1DA1F2;
  padding-top: 6px;
  display: block;
}

/* BOM edit action row */
.bom-edit-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding-top: 8px;
}

/* "Uredi stavke" button on result page */
.btn-edit-bom {
  margin-left: auto;
  background: #fff;
  border: 1px solid #1DA1F2;
  color: #1E293B;
  padding: 5px 14px;
  border-radius: 7px;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: background .15s;
}
.btn-edit-bom:hover { background: #E8F4FD; }

/* Section 1 editable header row */
.s1-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 0.25rem;
}

/* Section 1 edit-mode action bar */
.s1-edit-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.5rem;
  padding-top: 1rem;
  border-top: 1px solid #D9E2E7;
}

.s1-preserve-note {
  font-size: 0.8em;
  color: #6b7280;
}

/* Override note strip on result page */
.bom-override-note {
  background: #fffbeb;
  border: 1px solid #fcd34d;
  border-radius: 7px;
  padding: 8px 14px;
  font-size: 13px;
  color: #92400e;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.bom-override-link {
  margin-left: auto;
  color: #1E293B;
  font-weight: 600;
  text-decoration: none;
}
.bom-override-link:hover { text-decoration: underline; }

/* BOM override banner on edit page */
.bom-override-banner {
  background: #E8F4FD;
  border: 1px solid #D9E2E7;
  border-radius: 8px;
  padding: 10px 16px;
  font-size: 13px;
  color: #1DA1F2;
  margin-bottom: 18px;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}
.btn-reset-inline {
  background: none;
  border: 1px solid #D9E2E7;
  color: #1E293B;
  font-size: 12px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 5px;
  cursor: pointer;
}
.btn-reset-inline:hover { background: #E8F4FD; }

/* "BOM edited" save banner variant */
.save-banner-bom {
  background: #fffbeb;
  border: 1px solid #fcd34d;
  color: #92400e;
}

/* ── Pending new rows panel ──────────────────────────────────────────────────── */
.pnr-panel {
  margin-bottom: 24px;
  border: 1.5px dashed #94a3b8;
  border-radius: 12px;
  padding: 18px 20px 20px;
  background: #f8fafc;
}
.pnr-header {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.pnr-header h3 {
  font-size: 15px;
  font-weight: 700;
  color: #1E293B;
  margin: 0;
}
.pnr-hint {
  font-size: 12px;
  color: #64748b;
  flex: 1;
}
.btn-add-row {
  background: #1DA1F2;
  color: #fff;
  border: none;
  padding: 7px 16px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  transition: background .15s;
}
.btn-add-row:hover { background: #1DA1F2; }

.pnr-table-wrap {
  overflow-x: auto;
  margin-bottom: 10px;
}
.pnr-table {
  min-width: 920px;
}
.pnr-empty-hint {
  font-size: 13px;
  color: #94a3b8;
  text-align: center;
  padding: 8px 0;
}
/* brand filter pills inside pnr */
.pnr-brand-filter {
  display: flex;
  gap: 6px;
  margin-bottom: 10px;
}
/* per-row delete button */
.pnr-del-btn {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 15px;
  color: #9ca3af;
  padding: 2px 4px;
  border-radius: 4px;
  transition: color .12s;
}
.pnr-del-btn:hover { color: #ef4444; }

/* inline inputs inside new-row cells */
.pnr-text-input {
  width: 100%;
  padding: 5px 7px;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  font-size: 12px;
  background: #fff;
  min-width: 0;
}
.pnr-text-input:focus { outline: none; border-color: #1DA1F2; }

.pnr-select {
  width: 100%;
  padding: 5px 6px;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  font-size: 12px;
  background: #fff;
  min-width: 0;
}
.pnr-select:focus { outline: none; border-color: #1DA1F2; }

.pnr-sku {
  font-family: monospace;
  font-size: 11px;
}

/* inline catalog search input per row */
.pnr-search-input {
  width: 100%;
  padding: 5px 7px;
  border: 1.5px solid #D9E2E7;
  border-radius: 6px;
  font-size: 12px;
  background: #E8F4FD;
  min-width: 0;
}
.pnr-search-input:focus { outline: none; border-color: #1DA1F2; background: #fff; }
.pnr-search-input::placeholder { color: #94a3b8; font-size: 11px; }

.pnr-name-cell { min-width: 200px; }

/* catalog-selected chip inside row */
.pnr-name-chip {
  display: flex;
  align-items: center;
  gap: 5px;
  background: #E8F4FD;
  border: 1px solid #D9E2E7;
  border-radius: 6px;
  padding: 4px 6px;
  font-size: 11px;
}
.pnr-name-text {
  color: #1DA1F2;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
  min-width: 0;
}
.pnr-sku-inline {
  font-family: monospace;
  font-size: 10px;
  color: #1DA1F2;
  background: #D9E2E7;
  border-radius: 3px;
  padding: 1px 4px;
  white-space: nowrap;
  flex-shrink: 0;
}
.pnr-clear-name {
  background: none;
  border: none;
  color: #6b7280;
  font-size: 11px;
  cursor: pointer;
  padding: 0 2px;
  flex-shrink: 0;
}
.pnr-clear-name:hover { color: #ef4444; }

/* ── pending rows summary bar ──────────────────────────────────────────────── */
.pnr-summary {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  background: #E8F4FD;
  border: 1px solid #D9E2E7;
  border-radius: 8px;
  margin-bottom: 12px;
  font-size: 13px;
  flex-wrap: wrap;
}
.pnr-sum-count {
  font-weight: 700;
  color: #1E293B;
}
.pnr-sum-sep {
  color: #94a3b8;
}
.pnr-sum-label {
  color: #475569;
}
.pnr-sum-total {
  font-weight: 700;
  color: #1DA1F2;
  font-variant-numeric: tabular-nums;
}

/* ── grand total bar (existing + pending + grand) ────────────────────────── */
.bom-grand-total {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 13px 20px;
  background: #E8F4FD;
  border: 1px solid #A8D5F5;
  border-radius: 8px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}
.bgt-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 120px;
}
.bgt-label {
  font-size: 10px;
  font-weight: 700;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: .05em;
}
.bgt-val {
  font-size: 15px;
  font-weight: 700;
  color: #1E293B;
  font-variant-numeric: tabular-nums;
}
.bgt-op {
  font-size: 20px;
  font-weight: 300;
  color: #94a3b8;
  align-self: center;
  line-height: 1;
}
.bgt-eq {
  font-size: 22px;
  color: #475569;
  font-weight: 400;
}
.bgt-grand-item {
  border-left: 2px solid #A8D5F5;
  padding-left: 16px;
}
.bgt-grand-val {
  color: #1DA1F2;
  font-size: 18px;
}

/* ── row-level validation highlight ──────────────────────────────────────── */
.pnr-row-invalid {
  background: #fef2f2 !important;
  outline: 2px solid #fca5a5;
  outline-offset: -1px;
}
/* individual input that failed validation */
.pnr-input-error {
  border-color: #ef4444 !important;
  background: #fff5f5 !important;
  box-shadow: 0 0 0 2px rgba(239,68,68,.2) !important;
}

/* ── validation error message bar ────────────────────────────────────────── */
.pnr-err-msg {
  background: #fef2f2;
  border: 1px solid #fca5a5;
  color: #b91c1c;
  border-radius: 8px;
  padding: 10px 16px;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 12px;
}

/* shared floating catalog dropdown */
.cat-dropdown-float {
  position: absolute;
  background: #fff;
  border: 1px solid #cbd5e1;
  border-radius: 10px;
  box-shadow: 0 12px 32px rgba(0,0,0,.16);
  max-height: 340px;
  overflow-y: auto;
  z-index: 9999;
}

/* ── Catalog search / autocomplete ──────────────────────────────────────────── */

/* Mode switcher */
.add-mode-switcher {
  display: flex;
  gap: 8px;
  margin-bottom: 14px;
}
.add-mode-btn {
  background: #f1f5f9;
  border: 1px solid #cbd5e1;
  color: #475569;
  padding: 7px 18px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s, border-color .15s, color .15s;
}
.add-mode-btn:hover { background: #e2e8f0; }
.add-mode-active {
  background: #1DA1F2 !important;
  border-color: #0D8BE0 !important;
  color: #fff !important;
}

/* Search box wrapper */
.cat-search-wrap {
  position: relative;
  display: flex;
  align-items: center;
  max-width: 540px;
}
.cat-search-input {
  width: 100%;
  padding: 9px 36px 9px 12px;
  border: 1.5px solid #94a3b8;
  border-radius: 8px;
  font-size: 14px;
  background: #fff;
  outline: none;
  transition: border-color .15s;
}
.cat-search-input:focus { border-color: #1DA1F2; }
.cat-search-clear {
  position: absolute;
  right: 10px;
  color: #94a3b8;
  cursor: pointer;
  font-size: 14px;
  display: none;
  user-select: none;
}
.cat-search-clear:hover { color: #ef4444; }

/* Brand filter pills */
.cat-filter-pills {
  display: flex;
  gap: 6px;
  margin: 10px 0;
}
.cat-pill {
  background: #f1f5f9;
  border: 1px solid #cbd5e1;
  color: #475569;
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background .12s, color .12s;
}
.cat-pill:hover { background: #e2e8f0; }
.cat-pill-active { background: #1DA1F2; border-color: #1DA1F2; color: #fff; }

/* Dropdown panel */
.cat-dropdown {
  position: relative;
  max-width: 640px;
  background: #fff;
  border: 1px solid #cbd5e1;
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0,0,0,.12);
  max-height: 360px;
  overflow-y: auto;
  margin-top: 4px;
  z-index: 200;
}
.cat-drop-item {
  padding: 10px 14px;
  cursor: pointer;
  border-bottom: 1px solid #f1f5f9;
  transition: background .1s;
}
.cat-drop-item:last-child { border-bottom: none; }
.cat-drop-item:hover, .cat-drop-item:focus { background: #E8F4FD; outline: none; }
.cat-item-top {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 3px;
}
.cat-brand-chip {
  font-size: 10px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 4px;
  text-transform: uppercase;
  flex-shrink: 0;
}
.cat-brand-hdl { background: #E8F4FD; color: #1DA1F2; }
.cat-brand-gvs { background: #ecfeff; color: #0891b2; }
.cat-item-sku {
  font-size: 12px;
  font-weight: 700;
  color: #1E293B;
  font-family: monospace;
}
.cat-item-price {
  margin-left: auto;
  font-size: 13px;
  font-weight: 700;
  color: #1DA1F2;
  white-space: nowrap;
}
.cat-item-name {
  font-size: 12px;
  color: #374151;
  line-height: 1.35;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cat-item-cat {
  font-size: 10px;
  color: #9ca3af;
  margin-top: 2px;
}
.cat-no-results {
  padding: 14px 16px;
  font-size: 13px;
  color: #6b7280;
}
.cat-switch-manual {
  background: none;
  border: none;
  color: #1E293B;
  cursor: pointer;
  font-weight: 600;
  font-size: 13px;
  padding: 0;
}

/* Selected item chip */
.cat-selected-chip {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #E8F4FD;
  border: 1px solid #D9E2E7;
  border-radius: 8px;
  padding: 8px 14px;
  font-size: 13px;
  color: #1DA1F2;
  font-weight: 600;
  max-width: 640px;
  margin-top: 10px;
  word-break: break-all;
}
.cat-deselect {
  background: none;
  border: none;
  color: #6b7280;
  font-size: 15px;
  cursor: pointer;
  flex-shrink: 0;
  margin-left: auto;
  padding: 0 2px;
}
.cat-deselect:hover { color: #ef4444; }

/* qty row after selection */
.cat-qty-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 14px;
  padding: 14px;
  background: #f8fafc;
  border: 1px dashed #cbd5e1;
  border-radius: 8px;
}

/* ── PDF hint wrapper + clickable badge ────────────────────────────────────── */
.input-hint-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
}
.input-hint-wrap input {
  flex: 1;
  min-width: 0;
}
.pdf-hint-btn {
  flex-shrink: 0;
  background: #E8F4FD;
  border: 1px solid #D9E2E7;
  color: #1E293B;
  font-size: 12px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 5px;
  cursor: pointer;
  white-space: nowrap;
  line-height: 1.4;
  transition: background .15s, border-color .15s;
}
.pdf-hint-btn:hover {
  background: #E8F4FD;
  border-color: #D9E2E7;
}

@media (max-width: 640px) {
  .units-grid { grid-template-columns: 1fr; }
  .units-actions { flex-direction: column; align-items: stretch; }
  .units-actions-right { flex-direction: column; }
  .input-hint-wrap { flex-direction: column; align-items: stretch; }
  .pdf-hint-btn { align-self: flex-start; }
}

/* ── Pricing mode toggle / target sell price ───────────────────────────────── */
.field-hint {
  display: block;
  font-size: 12px;
  color: #64748b;
  margin-top: 4px;
  line-height: 1.4;
}

/* ── Profit winner in comparison table ─────────────────────────────────────── */
.profit-winner-row {
  background: #E8F4FD;
}
.profit-winner-cell {
  font-weight: 700;
  color: #1DA1F2;
}
.profit-winner-badge {
  display: inline-block;
  background: #E8F4FD;
  color: #1DA1F2;
  font-size: 11px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 4px;
  margin-left: 4px;
}

/* ── Profit decision row inside comparison-result block ─────────────────────── */
.profit-decision-row {
  border-top: 1px solid #A8D5F5;
  margin-top: 6px;
  padding-top: 6px;
}
.profit-winner-badge-inline {
  color: #1DA1F2;
  font-size: 15px;
}

/* ── Profit decision box at bottom of Section 5 ────────────────────────────── */
.profit-decision-box {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #E8F4FD;
  border: 1px solid #A8D5F5;
  border-radius: 8px;
  padding: 12px 16px;
  margin-top: 16px;
  font-size: 15px;
  color: #1DA1F2;
}
.profit-decision-icon {
  font-size: 18px;
  flex-shrink: 0;
}

/* ── Comparison table — discount controls bar ─────────────────────────────── */
.disc-controls-bar {
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
  background: #f0f9ff;
  border: 1px solid #bae6fd;
  border-radius: 8px;
  padding: 10px 16px;
  margin-bottom: 14px;
}
.disc-ctrl-group {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 500;
}
.disc-ctrl-group label {
  color: #1DA1F2;
  white-space: nowrap;
}
.disc-input {
  width: 58px;
  padding: 4px 8px;
  border: 1.5px solid #A8D5F5;
  border-radius: 5px;
  font-size: 14px;
  font-weight: 600;
  color: #1E293B;
  background: #fff;
  text-align: right;
}
.disc-input:focus {
  outline: none;
  border-color: #1DA1F2;
  box-shadow: 0 0 0 3px rgba(29,161,242,0.12);
}
.disc-hint {
  font-size: 12px;
  color: #64748b;
  font-style: italic;
}

/* ── Comparison table — scenario analysis block ────────────────────────────── */
.scenario-analysis-block {
  margin-top: 20px;
  padding: 16px 18px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
}
.scenario-analysis-block h3 {
  font-size: 15px;
  font-weight: 600;
  color: #1E293B;
  margin: 0 0 12px;
}
.scenario-table {
  margin-bottom: 14px;
}
.scenario-active-row {
  background: #E8F4FD !important;
  font-weight: 600;
}
.scenario-loss {
  color: #dc2626 !important;
}
.breakeven-block {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: #E8F4FD;
  border: 1px solid #A8D5F5;
  border-radius: 6px;
  font-size: 14px;
}
.breakeven-label {
  color: #1DA1F2;
  font-weight: 500;
}
.breakeven-value {
  font-size: 18px;
  font-weight: 700;
  color: #1DA1F2;
}
.breakeven-highlight {
  color: #1DA1F2;
}

/* ── Comparison table — nabavna column ─────────────────────────────────────── */
.nabavna-cell {
  color: #1E293B;
  font-weight: 600;
}
.col-hint {
  display: block;
  font-size: 11px;
  font-weight: 400;
  color: #64748b;
  margin-top: 2px;
}

/* ── Target sell price — missing price warning ──────────────────────────────── */
.sell-price-warning-row td.sell-price-warning {
  padding: 14px 16px;
  font-size: 13px;
  color: #92400e;
  background: #fffbeb;
  border-left: 3px solid #f59e0b;
  font-style: italic;
  text-align: center;
}
.sell-price-warning-inline {
  color: #92400e;
  background: #fffbeb;
  border: 1px solid #fde68a;
  border-radius: 4px;
  padding: 2px 8px;
  font-size: 13px;
  font-style: italic;
}

/* ── Assumptions panel ──────────────────────────────────────────────────────── */
.assumptions-panel {
  border: 2px dashed #9DCBD4;
  background: #F0FAFB;
}
.assumptions-panel[open] {
  border-style: solid;
  border-color: #1DA1F2;
}
.assumptions-summary {
  cursor: pointer;
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  flex-wrap: wrap;
  list-style: none;
  user-select: none;
}
.assumptions-summary::-webkit-details-marker { display: none; }
.assumptions-summary::before {
  content: '▶';
  font-size: 0.75em;
  color: #1DA1F2;
  transition: transform 0.15s;
  flex-shrink: 0;
}
details[open] .assumptions-summary::before { content: '▼'; }
.assumptions-hint {
  font-size: 0.8em;
  color: #6b7280;
  font-weight: 400;
}
.assumptions-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 0.75rem 1.25rem;
}
.assump-field {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}
.assump-label {
  font-size: 0.8em;
  font-weight: 600;
  color: #374151;
  display: flex;
  align-items: center;
  gap: 0.35rem;
  flex-wrap: wrap;
}
.assump-input {
  width: 100%;
  box-sizing: border-box;
}
.assump-auto-hint {
  font-size: 0.72em;
  color: #9ca3af;
}
.assump-readonly {
  background: #f3f4f6;
  cursor: default;
  line-height: 1.5;
  display: flex;
  align-items: center;
  color: #374151;
}
.badge-manual {
  display: inline-block;
  font-size: 0.68em;
  font-weight: 700;
  background: #fef3c7;
  color: #92400e;
  border: 1px solid #fde68a;
  border-radius: 3px;
  padding: 1px 5px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  flex-shrink: 0;
}
.btn-reset-override {
  background: none;
  border: 1px solid #d1d5db;
  border-radius: 4px;
  cursor: pointer;
  font-size: 1em;
  color: #6b7280;
  padding: 2px 5px;
  line-height: 1;
  flex-shrink: 0;
}
.btn-reset-override:hover { background: #f3f4f6; color: #374151; }

/* ── Sales Packages (BASIC / SMART / FULL) ──────────────────────────────── */
.pkg-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin-bottom: 0.75rem;
}
@media (max-width: 900px) { .pkg-grid { grid-template-columns: 1fr; } }

.pkg-card {
  border: 2px solid var(--pkg-accent, #1DA1F2);
  border-radius: 16px;
  padding: 1rem 1.1rem 1rem;
  background: #fff;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  position: relative;
  overflow: hidden;
}
.pkg-card--recommended {
  border-width: 3px;
  box-shadow: 0 8px 32px rgba(29,161,242,0.12);
  transform: translateY(-4px);
  background: #FFFFFF;
}
.pkg-ribbon {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  background: var(--pkg-accent, #1DA1F2);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
  text-align: center;
  letter-spacing: 0.06em;
  padding: 4px 0;
}
.pkg-card--recommended .pkg-header { margin-top: 1.5rem; }
.pkg-tier-badge {
  font-size: 0.68rem;
  font-weight: 700;
  border-radius: 20px;
  padding: 2px 9px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  flex-shrink: 0;
}
.pkg-tier-badge--basic       { background: #F3F4F6; color: #6B7280; }
.pkg-tier-badge--smart       { background: #E8F4FD; color: #1DA1F2; }
.pkg-tier-badge--full        { background: #FFF7ED; color: #C2410C; }
.pkg-subtitle {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--pkg-accent, #1DA1F2);
  margin: -0.3rem 0 0;
}
.pkg-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}
.pkg-label {
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: 0.07em;
  color: var(--pkg-accent, #1DA1F2);
}
.pkg-range {
  font-size: 0.80rem;
  font-weight: 600;
  color: #6b7280;
  background: #f3f4f6;
  border-radius: 4px;
  padding: 2px 8px;
}
.pkg-desc {
  font-size: 0.82rem;
  color: #374151;
  margin: 0;
  line-height: 1.45;
}
.pkg-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.83rem;
}
.pkg-table th {
  text-align: left;
  font-weight: 600;
  color: #6b7280;
  padding: 3px 0;
  border-bottom: 1px solid #D9E2E7;
}
.pkg-table td {
  padding: 4px 0;
  border-bottom: 1px solid #f3f4f6;
  vertical-align: middle;
}
.pkg-table .num { text-align: right; }
.pkg-row-total td {
  border-top: 2px solid var(--pkg-accent, #1DA1F2);
  border-bottom: 2px solid var(--pkg-accent, #1DA1F2);
  font-weight: 700;
  color: var(--pkg-accent, #1DA1F2);
  font-size: 0.9rem;
  padding: 5px 0;
}
.pkg-row-sub td {
  font-size: 0.78rem;
  color: #6b7280;
  padding: 2px 0 2px 6px;
  border: none;
}
.pkg-sub-label { color: #9ca3af; }
.pkg-sub-val   { color: #6b7280; }
.pkg-disclaimer {
  margin: 0.9rem 0 0;
  font-size: 0.82rem;
  color: #6b7280;
  font-style: italic;
  border-left: 3px solid #d1d5db;
  padding-left: 0.75rem;
  line-height: 1.5;
}
.pkg-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-top: 0.1rem;
}
.pkg-badge {
  font-size: 0.73rem;
  font-weight: 600;
  border-radius: 4px;
  padding: 2px 7px;
}
.pkg-badge-ok   { background: #E8F4FD; color: #1DA1F2; }
.pkg-badge-warn { background: #FFF7ED; color: #92400e; }

.pkg-profit-line {
  font-size: 0.82rem;
  padding-top: 0.35rem;
  border-top: 1px solid #f3f4f6;
}
.pkg-winner { font-weight: 700; }
.hdl-winner { color: #1E293B; }
.gvs-winner { color: #0891b2; }

/* ══════════════════════════════════════════════════════════════════════════
   COMMERCIAL CALCULATOR — cc-* classes
   ═══════════════════════════════════════════════════════════════════════ */

.cc-section {
  background: #fff;
  border: 1.5px solid #e2e8f0;
  border-radius: 14px;
  padding: 1.8rem 2rem 2rem;
  margin: 2rem 0 1.5rem;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}

.cc-section-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.4rem;
}
.cc-section-title {
  font-size: 1.2rem;
  font-weight: 700;
  color: #1E293B;
}
.cc-section-sub {
  font-size: 0.84rem;
  color: #64748b;
  margin-top: 0.2rem;
}

/* Global inputs row */
.cc-globals {
  display: flex;
  gap: 1.5rem;
  align-items: center;
  flex-wrap: wrap;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 0.75rem 1.1rem;
  margin-bottom: 1.6rem;
}
.cc-global-label {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.87rem;
  font-weight: 600;
  color: #475569;
  cursor: default;
}
.cc-input-wrap {
  display: flex;
  align-items: center;
  gap: 3px;
}
.cc-input-sm {
  width: 70px;
  padding: 0.3rem 0.5rem;
  border: 1.5px solid #cbd5e1;
  border-radius: 6px;
  font-size: 0.9rem;
  font-weight: 600;
  text-align: right;
  background: #fff;
  color: #1E293B;
  transition: border-color 0.15s;
}
.cc-input-sm:focus { outline: none; border-color: #1DA1F2; }
.cc-unit { font-size: 0.82rem; color: #64748b; }

/* Brand block */
.cc-brand-block {
  margin-bottom: 1.5rem;
}
.cc-brand-label {
  font-size: 0.95rem;
  font-weight: 700;
  padding: 0.4rem 0;
  margin-bottom: 0.5rem;
  border-bottom: 2px solid currentColor;
}
.cc-brand-hdl { color: #1E293B; border-color: #1E293B; }
.cc-brand-gvs { color: #0891b2; border-color: #0891b2; }

/* Table */
.cc-table-wrap { overflow-x: auto; }
.cc-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.86rem;
}
.cc-table th {
  background: #f1f5f9;
  color: #475569;
  font-weight: 600;
  padding: 0.55rem 0.7rem;
  text-align: left;
  border-bottom: 2px solid #e2e8f0;
  white-space: nowrap;
}
.cc-table th.num,
.cc-table td.num { text-align: right; }
.cc-th-edit { background: #E8F4FD !important; color: #1E293B !important; }

.cc-table td {
  padding: 0.45rem 0.7rem;
  border-bottom: 1px solid #f1f5f9;
  vertical-align: middle;
}
.cc-data-row:hover td { background: #f8fafc; }
.cc-unit-name { font-weight: 500; white-space: nowrap; }
.cc-ro { color: #374151; }

/* Editable input cells */
.cc-td-edit { background: #F9FAFB; }
.cc-inp {
  width: 90px;
  padding: 0.28rem 0.45rem;
  border: 1.5px solid #cbd5e1;
  border-radius: 5px;
  font-size: 0.85rem;
  text-align: right;
  background: #fff;
  color: #1E293B;
  transition: border-color 0.15s;
}
.cc-inp-qty { width: 54px; }
.cc-inp:focus { outline: none; border-color: #1DA1F2; background: #E8F4FD; }

/* Profit / margin colour coding */
.cc-positive { color: #1DA1F2; font-weight: 600; }
.cc-negative { color: #dc2626; font-weight: 600; }

/* Footer totals row */
.cc-total-row td {
  background: #f1f5f9;
  font-size: 0.87rem;
  border-top: 2px solid #e2e8f0;
  padding: 0.55rem 0.7rem;
}

/* Comparison bar */
.cc-comparison {
  display: flex;
  flex-wrap: wrap;
  gap: 1.2rem;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 0.9rem 1.2rem;
  margin: 1rem 0 1.4rem;
}
.cc-comp-item {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 130px;
}
.cc-comp-label {
  font-size: 0.76rem;
  color: #64748b;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.cc-comp-val {
  font-size: 1rem;
  font-weight: 700;
  color: #1E293B;
}
.cc-hdl-col { color: #1E293B; }
.cc-gvs-col { color: #0891b2; }

/* Save button */
.cc-save-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: #1DA1F2;
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 0.55rem 1.2rem;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s, transform 0.1s;
}
.cc-save-btn:hover { background: #0D8BE0; }
.cc-save-btn:active { transform: scale(0.97); }
.cc-save-ok { background: #1DA1F2 !important; }

/* Single-apartment variant */
.cc-single-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.2rem;
}
@media (max-width: 700px) {
  .cc-single-grid { grid-template-columns: 1fr; }
}
.cc-single-brand {
  border: 1px solid #D9E2E7;
  border-radius: 16px;
  padding: 1rem 1.2rem;
  box-shadow: 0 8px 24px rgba(15,23,42,0.04);
}
.cc-field-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.35rem 0;
  border-bottom: 1px solid #f1f5f9;
  font-size: 0.87rem;
}
.cc-field-row:last-child { border-bottom: none; }
.cc-field-label { color: #475569; }
.cc-field-val   { font-weight: 600; color: #1E293B; }
.cc-field-input {
  width: 100px;
  padding: 0.28rem 0.45rem;
  border: 1.5px solid #cbd5e1;
  border-radius: 5px;
  font-size: 0.85rem;
  text-align: right;
  background: #fff;
  transition: border-color 0.15s;
}
.cc-field-input:focus { outline: none; border-color: #1DA1F2; }
.cc-result-row { background: #f8fafc; }

/* ══ CC v2 — expanded commercial calculator additions ══════════════════════ */

/* Globals group */
.cc-globals-group {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}
.cc-globals-title {
  font-size: 0.82rem;
  color: #64748b;
  font-weight: 500;
}

/* Quick-apply panel */
.cc-quick-panel {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  margin-bottom: 1.4rem;
}
.cc-quick-brand {
  border-radius: 8px;
  padding: 0.65rem 1rem;
  border: 1px solid #e2e8f0;
}
.cc-quick-hdl-bg { background: #E8F4FD; border-color: #D9E2E7; }
.cc-quick-gvs-bg { background: #ecfeff; border-color: #a5f3fc; }
.cc-quick-title {
  font-size: 0.8rem;
  font-weight: 700;
  display: block;
  margin-bottom: 0.45rem;
}
.cc-quick-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.35rem;
}
.cc-inp-qa    { width: 110px; }
.cc-inp-qa-sm { width: 72px; }
.cc-qa-btn {
  background: #1DA1F2;
  color: #fff;
  border: none;
  border-radius: 5px;
  padding: 0.28rem 0.65rem;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}
.cc-qa-btn:hover { background: #0D8BE0; }

/* Wide table (multi-result) */
.cc-table-wide { font-size: 0.8rem; }
.cc-table-wide th,
.cc-table-wide td { padding: 0.38rem 0.5rem; white-space: nowrap; }
.cc-th-sale { background: #F9FAFB !important; color: #1E293B !important; }
.cc-th-work { background: #fefce8 !important; color: #92400e !important; }
.cc-td-sale { background: #f7fff9; }
.cc-td-work { background: #fffef7; }
.cc-td-sale input, .cc-td-work input { background: #fff; }

/* Totals grid (below tables) */
.cc-totals-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 1rem;
  margin-top: 1.4rem;
}
@media (max-width: 700px) { .cc-totals-grid { grid-template-columns: 1fr; } }
.cc-totals-brand, .cc-totals-diff {
  border: 1px solid #D9E2E7;
  border-radius: 16px;
  padding: 0.9rem 1.1rem;
  box-shadow: 0 8px 24px rgba(15,23,42,0.04);
}
.cc-totals-hdl { border-top: 3px solid #1E293B; }
.cc-totals-gvs { border-top: 3px solid #0891b2; }
.cc-totals-diff { border-top: 3px solid #1DA1F2; }
.cc-totals-brand-title {
  font-size: 0.88rem;
  font-weight: 700;
  margin-bottom: 0.6rem;
  color: #1E293B;
}
.cc-totals-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.25rem 0;
  font-size: 0.86rem;
  border-bottom: 1px solid #f1f5f9;
}
.cc-totals-row:last-child { border-bottom: none; }
.cc-totals-row span { color: #64748b; }
.cc-totals-row strong { font-weight: 700; color: #1E293B; }
.cc-totals-profit strong { font-size: 1rem; }
.cc-diff-winner {
  margin-top: 0.5rem;
  font-size: 0.82rem;
  font-weight: 700;
  text-align: center;
}

/* Single apartment — group labels and computed rows */
.cc-group-label {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #94a3b8;
  padding: 0.3rem 0 0.1rem;
}
.cc-result-computed { background: #f8fafc; }
.cc-result-computed .cc-field-val { color: #1E293B; font-weight: 600; }
.cc-field-input-sm { width: 80px !important; }

/* ══ Investor Pricing Engine styles ════════════════════════════════════════ */

.cc-investor {
  margin-top: 2rem;
  border-top: 3px solid #1DA1F2;
  padding-top: 1.4rem;
}
.cc-investor-hdr {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 1rem;
  flex-wrap: wrap;
  gap: 0.6rem;
}
.cc-investor-title {
  font-size: 1.15rem;
  font-weight: 800;
  color: #1DA1F2;
}
.cc-investor-sub {
  font-size: 0.82rem;
  color: #64748b;
  margin-top: 0.15rem;
}
.cc-export-btn {
  background: #1DA1F2;
  color: #fff;
  border: none;
  border-radius: 7px;
  padding: 0.5rem 1.1rem;
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.14s;
}
.cc-export-btn:hover { background: #0D8BE0; }

/* Package presets */
.cc-inv-globals {
  background: #E8F4FD;
  border: 1px solid #A8D5F5;
  border-radius: 8px;
  padding: 0.75rem 1rem;
  margin-bottom: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}
.cc-inv-pkg-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.cc-inv-pkg-label {
  font-size: 0.8rem;
  font-weight: 600;
  color: #1DA1F2;
}
.cc-pkg-btn {
  padding: 0.3rem 0.85rem;
  border-radius: 8px;
  border: 1.5px solid #D9E2E7;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}
/* All pkg buttons: neutral by default */
.cc-pkg-basic, .cc-pkg-smart, .cc-pkg-full {
  background: #F9FAFB;
  color: #6B7280;
  border-color: #D9E2E7;
}
.cc-pkg-basic:hover, .cc-pkg-smart:hover, .cc-pkg-full:hover {
  background: #E8F4FD;
  color: #1DA1F2;
  border-color: #D9E2E7;
}
/* Active / selected state */
.cc-pkg-active {
  background: #E8F4FD !important;
  color: #1DA1F2 !important;
  border-color: #1DA1F2 !important;
  font-weight: 700;
}
.cc-inv-margin-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
}
.cc-qa-btn-toggle {
  background: #64748b;
}
.cc-qa-btn-toggle:hover { background: #475569; }

/* Investor table */
.cc-inv-table { font-size: 0.78rem; }
.cc-inv-table th, .cc-inv-table td { padding: 0.36rem 0.45rem; white-space: nowrap; }
.cc-th-inv-margin { background: #fefce8 !important; color: #78350f !important; }
.cc-td-inv-margin { background: #fffef7; }
.cc-th-hdl-inv { background: #E8F4FD !important; color: #1DA1F2 !important; }
.cc-th-gvs-inv { background: #ecfeff !important; color: #0891b2 !important; }
.cc-td-hdl-inv { background: #f7fbff; }
.cc-td-gvs-inv { background: #f0fdff; }
.cc-inv-target-col { background: #fef9c3 !important; font-weight: 700 !important; }
.cc-inv-pkg-sel {
  font-size: 0.78rem;
  padding: 0.2rem 0.4rem;
  border: 1px solid #cbd5e1;
  border-radius: 4px;
  background: #fff;
}

/* Investor summary grid */
.cc-inv-sum-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 1rem;
  margin-top: 1.2rem;
}
@media (max-width: 700px) { .cc-inv-sum-grid { grid-template-columns: 1fr; } }
.cc-inv-sum-card {
  border: 1px solid #D9E2E7;
  border-radius: 16px;
  padding: 0.9rem 1.1rem;
  box-shadow: 0 8px 24px rgba(15,23,42,0.04);
}
.cc-inv-sum-hdl { border-top: 3px solid #1E293B; }
.cc-inv-sum-gvs { border-top: 3px solid #0891b2; }
.cc-inv-sum-diff { border-top: 3px solid #1DA1F2; }
.cc-inv-sum-title {
  font-size: 0.85rem;
  font-weight: 800;
  margin-bottom: 0.6rem;
}
.cc-inv-sum-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.25rem 0;
  font-size: 0.84rem;
  border-bottom: 1px solid #f1f5f9;
}
.cc-inv-sum-row span { color: #64748b; }
.cc-inv-sum-row b { font-weight: 700; color: #1E293B; }
.cc-inv-sum-profit b { font-size: 0.98rem; color: #1DA1F2; }
.cc-inv-sum-winner {
  margin-top: 0.7rem;
  font-size: 0.83rem;
  font-weight: 800;
  text-align: center;
}

/* ── Hero / Banner centered ─────────────────────────────────────────────── */
.hero,
.header-hero,
.banner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 28px 16px;
}
.hero h1 {
  font-size: 32px;
  font-weight: 800;
  color: #ffffff;
  margin: 0 0 6px;
}
.hero p {
  font-size: 16px;
  color: rgba(255,255,255,0.85);
  margin: 0;
}

@media (max-width: 768px) {
  .header-top { min-height: 76px; padding: 0 20px; }
  .logo { height: 76px; }
  .site-logo { height: 56px !important; }
  .hero h1 { font-size: 24px; }
  .hero p  { font-size: 14px; }
}

/* ══ Hero block ════════════════════════════════════════════════════════════ */
.hero-block {
  max-width: 960px;
  margin: 0 auto;
  padding: 48px 24px 40px;
  text-align: center;
}
.hero-title {
  font-size: clamp(28px, 4vw, 40px);
  font-weight: 800;
  color: #0F172A;
  line-height: 1.18;
  letter-spacing: -0.02em;
  margin-bottom: 16px;
}
.hero-accent {
  color: #1DA1F2;
}
.hero-sub {
  font-size: clamp(15px, 2vw, 18px);
  color: #5B7C99;
  line-height: 1.65;
  margin-bottom: 32px;
  max-width: 560px;
  margin-left: auto;
  margin-right: auto;
}
.hero-cta {
  display: inline-block;
  background: #1DA1F2;
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  padding: 12px 28px;
  border-radius: 10px;
  text-decoration: none;
  transition: background 0.15s;
  box-shadow: 0 4px 16px rgba(29,161,242,0.25);
}
.hero-cta:hover {
  background: #0D8BE0;
}
@media (max-width: 600px) {
  .hero-block { padding: 36px 20px 28px; }
  .hero-br { display: none; }
}

/* ── Building result: ensure all table headers are Smartify blue (override guard) */
.sh-table thead th,
.ust-table thead th,
.agg-table thead th,
.bom-mini-table thead th,
.cc-unit-tbl thead th {
  background-color: #1da1f2 !important;
  color: #ffffff !important;
  border-color: #1da1f2 !important;
}
.cc-unit-tbl thead tr:last-child th {
  background-color: #0D8BE0 !important;
}

/* ── Building result hero: high-contrast text on blue gradient */
.br-hero { background: linear-gradient(135deg, #1da1f2, #0b7edc) !important; }
.br-hero-h1,
.br-stat-val { color: #ffffff !important; font-weight: 700; }
.br-hero-sub,
.br-stat-lbl { color: rgba(255,255,255,0.85) !important; }

/* ── HEADER ACCENT BAR ──────────────────────────────────────────────────── */
.header-accent-bar {
  width: 100%;
  height: 6px;
  background: linear-gradient(90deg, #1e66d0, #1da1f2);
  flex-shrink: 0;
}

/* ── LOGO FORCE OVERRIDE (end of file, highest specificity) ──────────────── */
header .header-top a.logo img,
header img.site-logo,
.site-header .site-logo,
.logo img,
img[alt="Smartify"] {
  height: 56px !important;
  width: auto !important;
  max-height: none !important;
  max-width: none !important;
  min-height: unset !important;
  object-fit: contain !important;
  display: block !important;
}

.site-header,
.site-header .header-top,
.header-top {
  min-height: 76px !important;
  height: 76px !important;
  overflow: visible !important;
}

.logo,
a.logo {
  height: 76px !important;
  display: flex !important;
  align-items: center !important;
  overflow: visible !important;
}

@media (max-width: 768px) {
  .logo img,
  .pk-logo img,
  img[alt="Smartify"] { height: 48px !important; }
  .header-top,
  .pk-header { min-height: 68px !important; height: 68px !important; }
  .logo, a.logo { height: 68px !important; }
}