/* =====================================================
   TILBUD-MODUL — samlet styling
   ===================================================== */

/* Loading/skeleton + save-feedback animations */
@keyframes pulse { 0%,100% { opacity: 1 } 50% { opacity: .5 } }
@keyframes fadeOut { 0% { opacity: 1 } 70% { opacity: 1 } 100% { opacity: 0 } }
.skeleton-block { background: #f0f0f0; border-radius: 8px; animation: pulse 1.5s ease-in-out infinite; }
.save-success {
  background: #10b981; color: #fff; padding: 4px 10px; border-radius: 4px;
  font-size: 11px; margin-right: 8px; animation: fadeOut 3s forwards;
  display: inline-block; font-weight: 500;
}

/* Status badges */
.tilbud-status-draft    { background: #4b5563; color: white; } /* WCAG AA: ratio >4.5:1 */
.tilbud-status-sent     { background: #3b82f6; color: white; }
.tilbud-status-won      { background: #10b981; color: white; }
.tilbud-status-lost     { background: #ef4444; color: white; }
.tilbud-status-archived { background: #9ca3af; color: white; }

/* EI-klasse pills */
.ei-pill { padding: 2px 8px; border-radius: 4px; font-size: 11px; font-weight: 600; display: inline-block; }
.ei-30   { background: #fef3c7; color: #92400e; }
.ei-60   { background: #fed7aa; color: #9a3412; }
.ei-90   { background: #fecaca; color: #991b1b; }
.ei-120  { background: #fca5a5; color: #7f1d1d; }

/* Detail tabs — sleek underline-style */
.sag-tabs {
  display: flex; gap: 4px;
  border-bottom: 1px solid var(--brd);
  margin-bottom: 20px;
  position: sticky; top: 0; z-index: 20;
  background: var(--card, #fff);
}
.sag-tab {
  padding: 10px 16px; border: 0; background: transparent; cursor: pointer;
  font-size: 13px; color: var(--ink2);
  border-bottom: 2px solid transparent; margin-bottom: -1px;
  transition: color .15s, border-color .15s;
}
.sag-tab.active { color: var(--ink); border-bottom-color: var(--acc); font-weight: 500; }
.sag-tab:hover:not(.active) { color: var(--ink); background: rgba(0,0,0,.02); }
.sag-tab .dirty-dot { display:inline-block; width:6px; height:6px; background:#eab308; border-radius:50%; margin-left:6px; vertical-align:middle; }

/* KPI-kort tilbud-specifik */
.tilbud-kpi {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px;
  margin-bottom: 24px;
}
.tilbud-kpi .kpi {
  background: var(--card); padding: 16px;
  border-radius: 8px; border: 1px solid var(--brd);
}
.tilbud-kpi .kpi .label {
  font-size: 12px; color: var(--ink2);
  text-transform: uppercase; letter-spacing: .5px;
}
.tilbud-kpi .kpi .value { font-size: 24px; font-weight: 600; margin-top: 4px; }
.tilbud-kpi .kpi .sub   { font-size: 11px; color: var(--ink2); margin-top: 2px; }

/* Prisfaktor breakdown (økonomi-tab) */
.prisfaktor-breakdown {
  background: var(--card); padding: 16px; border-radius: 8px;
  font-family: ui-monospace, SFMono-Regular, monospace;
  font-size: 13px;
}
.prisfaktor-breakdown .line { display: flex; justify-content: space-between; padding: 4px 0; }
.prisfaktor-breakdown .line.subtotal { border-top: 1px solid var(--brd); padding-top: 8px; margin-top: 8px; font-weight: 600; }
.prisfaktor-breakdown .line.total {
  background: var(--acc); padding: 8px 12px; border-radius: 4px;
  font-weight: 700; color: #000; margin-top: 8px;
}

/* Forbehold */
.forbehold-group { border: 1px solid var(--brd); border-radius: 6px; margin-bottom: 8px; }
.forbehold-group summary { padding: 10px 14px; cursor: pointer; font-weight: 500; background: #fafafa; }
.forbehold-item { padding: 8px 14px; border-top: 1px solid #f5f5f5; display: flex; gap: 12px; align-items: start; }
.forbehold-item input[type=checkbox] { margin-top: 3px; }
.severity-critical { border-left: 3px solid #ef4444; }
.severity-standard { border-left: 3px solid #eab308; }
.severity-optional { border-left: 3px solid #9ca3af; }

/* Empty-state */
.empty-state { text-align: center; padding: 48px 16px; color: var(--ink2); }
.empty-state .icon { font-size: 48px; margin-bottom: 12px; opacity: .3; }
.empty-state .title { font-size: 14px; font-weight: 500; margin-bottom: 4px; color: var(--ink); }
.empty-state .sub { font-size: 12px; }
.empty-state .action { margin-top: 16px; }

/* Holes tabel — tæt pakning */
.holes-table { font-size: 12.5px; }
.holes-table th { background: #fafafa; text-align: left; padding: 8px 10px; font-weight: 500; color: var(--ink2); border-bottom: 1px solid var(--brd); }
.holes-table td { padding: 6px 10px; border-bottom: 1px solid #f5f5f5; }
.holes-table td input { width: 100%; padding: 4px 6px; border: 1px solid transparent; border-radius: 3px; font-size: 12.5px; background: transparent; }
.holes-table td input:focus { border-color: var(--acc); background: #fff; }
.holes-table tfoot td { background: #fafafa; font-weight: 600; }

/* Produkt-grid */
.products-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.product-card { background: var(--card); border: 1px solid var(--brd); border-radius: 8px; padding: 12px; cursor: pointer; transition: all .15s; }
.product-card:hover { border-color: var(--acc); transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0,0,0,.06); }
.product-card .sku { font-size: 10px; color: var(--ink2); font-family: monospace; }
.product-card .name { font-size: 13px; font-weight: 500; margin: 6px 0; }
.product-card .price { font-size: 14px; font-weight: 600; color: #2E7D32; }

/* PDF-preview */
.pdf-preview-iframe { width: 100%; height: 600px; border: 1px solid var(--brd); border-radius: 6px; background: white; }

/* Wizard-progress (tilbud-new) */
.wizard-progress { display: flex; gap: 0; margin-bottom: 24px; }
.wizard-step {
  flex: 1; padding: 12px 16px; background: var(--card);
  border: 1px solid var(--brd); font-size: 13px; color: var(--ink2);
  position: relative;
}
.wizard-step.active { background: var(--acc); color: #000; font-weight: 500; }
.wizard-step.completed { background: #10b981; color: white; }
.wizard-step + .wizard-step { border-left: 0; }
.wizard-step:first-child { border-radius: 6px 0 0 6px; }
.wizard-step:last-child { border-radius: 0 6px 6px 0; }

/* Sticky save-footer i detail */
#bsb-sticky-save-footer {
  position: sticky; bottom: 0; z-index: 30;
  background: var(--card, #fff);
  border-top: 1px solid var(--brd);
  padding: 12px 24px;
  display: flex; gap: 8px; justify-content: flex-end;
  box-shadow: 0 -4px 12px rgba(0,0,0,.04);
}

/* Bulk-action bar */
.bulk-bar {
  background: #fff; border: 2px solid var(--acc, #B9FF31);
  padding: 10px 14px; border-radius: 8px;
  display: flex; gap: 12px; align-items: center;
  margin-bottom: 12px;
}
.bulk-bar .count { font-weight: 600; }

/* Quick-actions hover */
.quick-actions { opacity: 0; transition: opacity .15s; display: flex; gap: 4px; }
tr:hover .quick-actions { opacity: 1; }
.quick-action-btn { padding: 2px 6px; background: transparent; border: 1px solid var(--brd); border-radius: 3px; cursor: pointer; font-size: 11px; }
.quick-action-btn:hover { background: var(--acc); border-color: var(--acc); }

/* Draft-row banner */
tr.draft-row td:first-child { box-shadow: inset 4px 0 0 #eab308; }

/* Breadcrumb */
.breadcrumb { font-size: 12px; color: var(--ink2); margin-bottom: 4px; }
.breadcrumb a { color: var(--ink2); text-decoration: none; }
.breadcrumb a:hover { color: var(--ink); text-decoration: underline; }
.breadcrumb span.sep { margin: 0 6px; opacity: .5; }

/* Activity log side-panel (detail) */
.activity-panel { border-left: 1px solid var(--brd); padding-left: 16px; font-size: 12px; }
.activity-panel .entry { padding: 8px 0; border-bottom: 1px solid #f5f5f5; }
.activity-panel .time { color: var(--ink2); font-size: 11px; }

/* Responsiveness */
@media (max-width: 1280px) {
  .tilbud-kpi { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
  .tilbud-kpi { grid-template-columns: repeat(2, 1fr); }
  .sag-tabs { flex-wrap: wrap; }
  .products-grid { grid-template-columns: 1fr; }
  /* Skjul OPRETTET (5) og PM (7) kolonner på mobil — fokus på KODE/TITEL/STATUS/VÆRDI */
  .mtbl thead th:nth-child(5),
  .mtbl tbody td:nth-child(5),
  .mtbl thead th:nth-child(7),
  .mtbl tbody td:nth-child(7) { display: none; }
  .mtbl { font-size: 12px; }
  .filter-chip { font-size: 11px; padding: 4px 8px; }
}
@media (max-width: 375px) {
  .tilbud-kpi { grid-template-columns: 1fr; }
  .sag-tabs { overflow-x: auto; flex-wrap: nowrap; }
}

/* ═══════════════ DARK MODE (TILBUD) ═══════════════ */
html[data-dark="1"] .sag-tab { color: #a0a0a0; }
html[data-dark="1"] .sag-tab.active { color: #f0f0f0; }
html[data-dark="1"] .holes-table th { background: #2a2a2a; color: #d0d0d0; }
html[data-dark="1"] .holes-table td input:focus { background: #1f1f1f; }

/* ═══════════════ HEADER-STRIP + PROGRESS-DOTS (2026-04-23) ═══════════════ */
/* Header-strip øverst på tilbud-detail (erstatter Stamdata-tab) */
.offer-header-strip {
  border: 1px solid var(--brd, #e5e5e5);
  background: var(--card, #fff);
  box-shadow: 0 1px 2px rgba(0,0,0,.04);
}
.offer-header-strip .lead-code-chip {
  user-select: all;
}
.offer-header-strip input[type="range"] {
  height: 4px;
}
/* Progress-dots under tab-labels */
.sag-tab .tab-progress {
  font-family: monospace;
  pointer-events: none;
  user-select: none;
}
.compact-head { margin-bottom: 4px; }
.compact-head h1 { display: none; } /* H1 er flyttet til header-strip */

html[data-dark="1"] .offer-header-strip { background: #1a1a1a; border-color: #2a2a2a; }
html[data-dark="1"] .offer-header-strip .lead-code-chip { background: #000; color: #B9FF31; }