/* Eigene Styles – unabhängig vom Tailwind-CDN (kein @apply) */

:root {
  --brand-50:  #f0f9ff;
  --brand-100: #e0f2fe;
  --brand-500: #0ea5e9;
  --brand-600: #0284c7;
  --brand-700: #0369a1;
  --brand-900: #0c4a6e;
}

.tab-btn {
  padding: 0.5rem 0.875rem;
  border-radius: 0.375rem;
  color: #cbd5e1;
  transition: all 0.15s;
  background: transparent;
  border: 0;
  cursor: pointer;
  font-size: 0.875rem;
}
.tab-btn:hover { background: #1e293b; color: white; }
.tab-btn.active { background: var(--brand-600); color: white; }

/* Tab-Bar darf horizontal scrollen, ohne Scrollbar zu zeigen (iPad/Mobile) */
#main-tabs::-webkit-scrollbar { display: none; }

.card {
  background: white;
  border-radius: 0.5rem;
  border: 1px solid #e2e8f0;
  box-shadow: 0 1px 2px rgba(0,0,0,0.05);
  padding: 1.25rem;
}
.card-title {
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 0.75rem;
  color: #1e293b;
}

.kpi {
  background: white;
  border-radius: 0.5rem;
  border: 1px solid #e2e8f0;
  box-shadow: 0 1px 2px rgba(0,0,0,0.05);
  padding: 1rem;
}
.kpi-label {
  font-size: 0.75rem;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.kpi-value {
  font-size: 1.5rem;
  font-weight: 700;
  color: #0f172a;
  margin-top: 0.25rem;
}

.inp {
  display: block;
  width: 100%;
  margin-top: 0.25rem;
  border-radius: 0.25rem;
  border: 1px solid #cbd5e1;
  padding: 0.375rem 0.5rem;
  font-size: 0.875rem;
  background: white;
}
.inp:focus {
  outline: none;
  border-color: var(--brand-500);
  box-shadow: 0 0 0 2px rgba(14,165,233,0.2);
}

.btn-primary {
  padding: 0.5rem 1rem;
  background: var(--brand-600);
  color: white;
  border: 0;
  border-radius: 0.375rem;
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s;
}
.btn-primary:hover { background: var(--brand-700); }
.btn-primary:disabled { opacity: 0.5; cursor: not-allowed; }

.btn-secondary {
  padding: 0.5rem 1rem;
  background: #e2e8f0;
  color: #0f172a;
  border: 0;
  border-radius: 0.375rem;
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s;
}
.btn-secondary:hover { background: #cbd5e1; }

.btn-danger {
  padding: 0.5rem 1rem;
  background: #e11d48;
  color: white;
  border: 0;
  border-radius: 0.375rem;
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s;
}
.btn-danger:hover { background: #be123c; }

/* SRI Badge */
.sri-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem; height: 2rem;
  border-radius: 9999px;
  font-weight: 700;
  font-size: 1rem;
}
.sri-1 { background: #d1fae5; color: #065f46; }
.sri-2 { background: #ecfccb; color: #365314; }
.sri-3 { background: #fef3c7; color: #78350f; }
.sri-4 { background: #fed7aa; color: #7c2d12; }
.sri-5 { background: #fecaca; color: #7f1d1d; }
.sri-6 { background: #fca5a5; color: #7f1d1d; }
.sri-7 { background: #f87171; color: white; }

.risk-low  { color: #059669; font-weight: 600; }
.risk-med  { color: #d97706; font-weight: 600; }
.risk-high { color: #dc2626; font-weight: 600; }

#dropzone.drag-over {
  background: var(--brand-50);
  border-color: var(--brand-500);
}

/* Barriere-berührt Zeilen (Dashboard upcoming + Portfolio) */
tr.barrier-touched td {
  background: #fee2e2 !important;
}
tr.barrier-touched:hover td {
  background: #fecaca !important;
}

/* Drucken: nur Analyse-Inhalt sichtbar */
/* Drucken: nur Analyse-Inhalt sichtbar */
@media print {
  header, nav, .tab-btn, #dropzone, #parse-status, .btn-primary, .btn-secondary, .btn-danger,
  #analyze-result .card:last-child, #port-summary, #analysen-tbody button { display: none !important; }
}

/* Tabellen */
table { border-collapse: collapse; width: 100%; }
table tbody tr:nth-child(odd) td { background: white; }
table tbody tr:nth-child(even) td { background: #f8fafc; }
table tbody tr:hover td { background: var(--brand-50); }
table th { font-weight: 600; }
table td, table th {
  padding: 0.5rem;
  border-bottom: 1px solid #e2e8f0;
  text-align: left;
}
table th.text-right, table td.text-right { text-align: right; }

/* Sortierbare Spaltenheader */
th.sort-col {
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
}
th.sort-col:hover { background: #e2e8f0; }
th.sort-col::after { content: ' ↕'; opacity: 0.3; font-size: 0.75em; }
th.sort-col.sort-asc::after  { content: ' ↑'; opacity: 1; }
th.sort-col.sort-desc::after { content: ' ↓'; opacity: 1; }

/* Portfolio: Produkt-Spalte soll sich am Inhalt orientieren statt sich mit
   dem Rest der (sehr breiten) Tabelle zu strecken – lange Produktnamen
   brechen um, statt die Spalte unbegrenzt zu verbreitern. */
.col-product {
  max-width: 260px;
  white-space: normal !important;
  overflow-wrap: anywhere;
}

/* Workflow-Breadcrumb: Analyse → Auftrag → Zuteilung → Portfolio */
.wf-breadcrumb { margin-top: 6px; font-size: 11px; }
.wf-breadcrumb .wf-step { color: var(--text-dim); }
.wf-breadcrumb .wf-step.current { color: var(--accent); font-weight: 600; }
.wf-breadcrumb .wf-arrow { color: var(--text-dim); margin: 0 5px; }