/* Sobyar - Design-System fuer die Web-Module (LDT-Modulator ist das erste).
   Struktur (Tab-Leiste, Card, Tabellen) angelehnt an das interne Argon-
   Wissensdatenbank-Muster (app/static/css/argon.css), Farbakzent aus dem
   Sobyar-Logo (dunkles Anthrazit/Ink + Rot-Akzent ED1C24) - bewusst NICHT
   die Argon-Marke selbst: "Sobyar" ist die neue, von Argon losgeloeste
   Marke fuer den Verkauf/die Vermietung dieser Tools an Kunden - der
   Name "So-by-Ar(gon)" bleibt bewusst NUR intern bekannt, siehe Memory
   project_sobyar_branding. Vorheriger Markenname "Luminra" wurde wegen
   einer Namenskollision mit "Luminar" verworfen (2026-09-16). */

:root {
  --color-bg: #f6f6f8;
  --color-surface: #ffffff;
  --color-text: #2b2e3b;
  --color-text-muted: #6b7180;
  --color-headline: #21232d;
  --color-accent: #ed1c24;
  --color-accent-hover: #c8141c;
  --color-accent-soft: #fde6e7;
  --color-border: #e3e4e9;
  --color-table-header: #f1f1f4;
  --color-zebra: #fafafb;
  --color-row-selected: #fde3e2;
  --color-success-bg: #e5f5ea;
  --color-success-text: #227a4b;
  --color-error-bg: #fbe7e6;
  --color-error-text: #b3261e;
  --color-warning-bg: #fff4d6;
  --color-warning-text: #7a5a00;
  --color-statusbar-bg: #21232d;
  --color-illustration-bg: #faf6f1;
  --radius-card: 10px;
  --radius-input: 6px;
  --font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* --- Stilisierte Ablauf-Illustrationen (linienbasiert, Rot-Akzent) ------- */
.illustration-banner {
  background: var(--color-illustration-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  padding: 18px 20px 10px;
  margin-bottom: 16px;
  text-align: center;
}

.illustration-banner svg { width: 100%; max-width: 420px; height: auto; }

/* LVK-Viewer-Polardiagramm: nur ein viewBox, keine feste Breite/Hoehe - ohne
   diese Regel kollabiert die SVG in ihrem Flex-Container (#lvkChartContainer)
   auf praktisch 0px Hoehe und ist unsichtbar, obwohl sie korrekt im DOM
   steht (siehe Chat: Meta-Zeile und Legende erschienen, das Diagramm nicht). */
#lvkChartContainer svg { width: 100%; max-width: 420px; height: auto; }

.illustration-banner__caption {
  font-size: 0.82rem;
  color: var(--color-text-muted);
  margin-top: 4px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-family);
  font-size: 14px;
}

a { color: var(--color-accent); }

.app-shell {
  max-width: 980px;
  margin: 0 auto;
  padding: 28px 20px 60px;
}

/* --- Markenzeichen ------------------------------------------------------ */
.brand-bar {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 20px;
  gap: 16px;
  flex-wrap: wrap;
}

.brand {
  display: inline-block;
}

.brand__row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.brand__y-wrap {
  position: relative;
  display: inline-block;
}

.brand__dot {
  position: absolute;
  top: -0.62em;
  left: 50%;
  transform: translateX(-50%);
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--color-accent);
  box-shadow:
    0 0 0 3px rgba(237, 28, 36, 0.18),
    0 0 0 6px rgba(237, 28, 36, 0.09);
}

.brand__word {
  font-size: 1.7rem;
  font-weight: 600;
  color: var(--color-headline);
  letter-spacing: -0.02em;
  line-height: 1;
}

.brand__underline {
  height: 3px;
  margin-top: 4px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--color-accent), rgba(230, 57, 70, 0));
}

.brand__tagline {
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--color-text-muted);
  margin-top: 3px;
}

.module-badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--color-accent-soft);
  color: var(--color-accent-hover);
  font-weight: 600;
  font-size: 0.75rem;
  margin-left: 10px;
  vertical-align: middle;
}

.account-box {
  text-align: right;
  font-size: 0.82rem;
  color: var(--color-text-muted);
}

.account-box b { color: var(--color-text); }

/* --- Tabs (Muster wie Wissensdatenbank main-tabs) ----------------------- */
.main-tabs {
  display: flex;
  gap: 2px;
  background: #ececf0;
  border-radius: var(--radius-card);
  padding: 4px;
  margin-bottom: 20px;
}

.main-tabs__item {
  flex: 1;
  text-align: center;
  padding: 9px 14px;
  font-weight: 600;
  font-size: 0.88rem;
  color: var(--color-text-muted);
  background: transparent;
  border: none;
  border-radius: 7px;
  cursor: pointer;
  font-family: var(--font-family);
}

.main-tabs__item:hover:not(.is-active) { background: #e2e2e8; color: var(--color-text); }

.main-tabs__item.is-active {
  background: var(--color-surface);
  color: var(--color-headline);
  box-shadow: 0 1px 3px rgba(33, 35, 45, 0.12);
}

.tab-panel { display: none; }
.tab-panel.is-active { display: block; }

.main-tabs__item.is-locked::after { content: " 🔒"; opacity: 0.6; }

.module-lock-banner {
  background: var(--color-accent-soft);
  color: var(--color-accent-hover);
  border: 1px solid var(--color-accent);
  border-radius: var(--radius-card);
  padding: 14px 18px;
  margin-bottom: 16px;
  font-weight: 600;
  font-size: 0.9rem;
}

.sub-tabs {
  display: flex;
  gap: 4px;
  border-bottom: 2px solid var(--color-border);
  margin-bottom: 16px;
}

.sub-tabs__item {
  padding: 8px 16px;
  font-weight: 600;
  font-size: 0.84rem;
  color: var(--color-text-muted);
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  cursor: pointer;
  font-family: var(--font-family);
}

.sub-tabs__item:hover:not(.is-active) { color: var(--color-text); background: transparent; }
.sub-tabs__item.is-active:hover { background: transparent; }

.sub-tabs__item.is-active {
  color: var(--color-accent);
  border-bottom-color: var(--color-accent);
}

.sub-tab-panel { display: none; }
.sub-tab-panel.is-active { display: block; }

/* --- Grundbausteine ------------------------------------------------------ */
h1, h2 { color: var(--color-headline); margin: 0 0 6px 0; }
h1 { font-size: 1.25rem; }
h2 { font-size: 1.05rem; }

.hint { color: var(--color-text-muted); font-size: 0.86rem; line-height: 1.5; }

.card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  padding: 18px 20px;
  margin: 0 0 16px 0;
  box-shadow: 0 1px 2px rgba(33, 35, 45, 0.04);
}

table { width: 100%; border-collapse: collapse; margin-top: 10px; }
th, td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--color-border); font-size: 0.88rem; }
thead th { background: var(--color-table-header); color: var(--color-text); font-weight: 600; }
tbody tr:nth-child(even) { background: var(--color-zebra); }

.badge { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 0.78rem; font-weight: 600; }
.badge.ready { background: var(--color-success-bg); color: var(--color-success-text); }
.badge.missing { background: var(--color-error-bg); color: var(--color-error-text); }
.badge.pending { background: #fff4e0; color: #96650b; }

/* --- Kunden-Register im Admin Center (siehe Chat: "die Anzahl der Module
   wird immer groesser, es waere besser, im Admin Center fuer jeden Kunden
   ein eigenes aufklappbares Register zu machen") --------------------------- */
.admin-user-card { border: 1px solid var(--color-border); border-radius: var(--radius-card); margin-bottom: 10px; padding: 0 16px; }
.admin-user-card summary { display: flex; align-items: center; gap: 10px; padding: 12px 0; }
.admin-user-card summary .admin-user-card__username { font-weight: 700; color: var(--color-headline); }
.admin-user-card__body { padding: 4px 0 16px; border-top: 1px solid var(--color-border); }
.admin-user-card__fields { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 12px; }
.admin-user-card__fields > div { flex: 1; min-width: 160px; }
.admin-user-card__modules-table th, .admin-user-card__modules-table td { vertical-align: middle; }
.admin-user-card__module-price { max-width: 110px; }

/* --- Schritt-Übersicht (an der Desktop-App orientiert: nummerierte Karten,
   Kennzahlen-Kacheln, Status-Leiste) -------------------------------------- */
.step-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
@media (max-width: 720px) {
  .step-grid { grid-template-columns: 1fr; }
}

.stat-row { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 14px; }

.stat-tile {
  flex: 1;
  min-width: 100px;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-input);
  padding: 10px 14px;
}
.stat-tile__label { font-size: 0.74rem; color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.04em; }
.stat-tile__value { font-size: 1.35rem; font-weight: 700; color: var(--color-headline); margin-top: 2px; }

.status-line {
  padding: 8px 14px;
  border-radius: var(--radius-input);
  font-size: 0.86rem;
  font-weight: 600;
  margin-bottom: 10px;
}
.status-line.complete { background: var(--color-success-bg); color: var(--color-success-text); }
.status-line.incomplete { background: var(--color-error-bg); color: var(--color-error-text); }
.status-line.neutral { background: var(--color-bg); color: var(--color-text-muted); }
.status-line.warning { background: var(--color-warning-bg); color: var(--color-warning-text); }
tr.scaling-urgent td { font-weight: 700; }

tr.is-selectable { cursor: pointer; }
tr.is-selected { background: var(--color-row-selected) !important; }

/* Eigener animierter Ladebalken statt nativem <progress> im
   unbestimmten Zustand - dessen Indeterminate-Animation wird von
   benutzerdefinierten ::-webkit-progress-*-Pseudoelementen zuverlässig
   überschrieben und friert dann optisch ein. */
.loading-bar {
  position: relative;
  height: 8px;
  border-radius: 999px;
  background: var(--color-border);
  overflow: hidden;
}
.loading-bar__fill {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 40%;
  border-radius: 999px;
  background: var(--color-accent);
  animation: loading-slide 1.1s ease-in-out infinite;
}
@keyframes loading-slide {
  0% { left: -40%; }
  100% { left: 100%; }
}

.collapsible summary {
  cursor: pointer;
  font-weight: 600;
  font-size: 0.86rem;
  color: var(--color-accent);
  padding: 8px 0;
  list-style: none;
}
.collapsible summary::-webkit-details-marker { display: none; }
.collapsible summary::before {
  content: "▸";
  display: inline-block;
  margin-right: 6px;
  transition: transform 0.15s ease;
}
.collapsible[open] summary::before { transform: rotate(90deg); }
.collapsible table { max-height: 320px; display: block; overflow-y: auto; }
.collapsible thead, .collapsible tbody { display: table; width: 100%; table-layout: fixed; }

button {
  padding: 8px 16px;
  border-radius: var(--radius-input);
  border: 1px solid var(--color-accent);
  background: var(--color-accent);
  color: #ffffff;
  font-weight: 600;
  font-family: var(--font-family);
  font-size: 0.88rem;
  cursor: pointer;
  transition: background 0.15s ease;
}

.assign-pick-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(33, 35, 45, 0.55);
  padding: 16px;
}
.assign-pick-box {
  background: var(--color-surface);
  border-radius: var(--radius-card);
  padding: 24px 28px;
  max-width: 480px;
  width: 100%;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
}
.assign-pick-step { font-size: 0.85rem; color: var(--color-text-muted); margin-bottom: 6px; }
.assign-pick-size { font-size: 1.2rem; font-weight: 600; color: var(--color-headline); margin-bottom: 8px; }
.assign-pick-context { font-size: 0.9rem; color: var(--color-text); margin-bottom: 20px; }
.assign-pick-actions { display: flex; gap: 10px; justify-content: flex-end; }

button:hover { background: var(--color-accent-hover); border-color: var(--color-accent-hover); }
button:disabled { background: #e3e4e9; border-color: #e3e4e9; color: #a7abb6; cursor: not-allowed; }

.ghost {
  background: var(--color-surface);
  color: var(--color-text);
  border: 1px solid var(--color-border);
}
.ghost:hover { background: var(--color-bg); border-color: #c9cbd4; }

progress {
  width: 100%;
  height: 10px;
  border-radius: 999px;
  overflow: hidden;
  border: none;
}
progress::-webkit-progress-bar { background: var(--color-border); border-radius: 999px; }
progress::-webkit-progress-value { background: var(--color-accent); border-radius: 999px; }

#status, #mlStatus { margin-top: 12px; white-space: pre-wrap; font-size: 0.88rem; color: var(--color-text); }

input[type=number], input[type=text], input[type=password], input[type=email] {
  padding: 7px 10px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-input);
  width: 100%;
  box-sizing: border-box;
  font-family: var(--font-family);
  font-size: 0.9rem;
  background: var(--color-surface);
  color: var(--color-text);
}
input:focus { outline: none; border-color: var(--color-accent); box-shadow: 0 0 0 3px var(--color-accent-soft); }

label { display: block; font-weight: 600; font-size: 0.82rem; color: var(--color-text-muted); margin-bottom: 4px; }

.checkbox-row { display: flex; align-items: center; gap: 8px; }
.checkbox-row input[type=checkbox] { width: auto; }
.checkbox-row label { margin-bottom: 0; }

/* Ausgabe-Tabelle in Schritt 4: je Dateiart erzeugen / lokal / FTP */
.output-table-wrap { overflow-x: auto; }
.output-table td, .output-table th { vertical-align: middle; }
.output-table td:first-child { font-weight: 600; }
.output-table input[type=checkbox] { width: auto; margin: 0; }
.output-table .out-cell { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.output-table .out-ftp-dir { width: 200px; }
.output-table .out-local-button { padding: 4px 10px; font-size: 0.82rem; }
.output-table .out-local-name { font-size: 0.82rem; }
.output-table .out-sub { font-weight: 400; margin-top: 4px; display: flex; align-items: center; gap: 6px; }
.output-table .out-sub input { width: 110px; padding: 3px 6px; font-size: 0.82rem; }
.output-table tr.is-inactive td:not(:first-child):not(:nth-child(2)) { opacity: 0.45; }
.output-table tr.is-locked { opacity: 0.5; }

td.narrow { width: 34px; text-align: center; }

/* Ersetzt den nativen Datei-Auswahl-Button: dessen Beschriftung
   ("Datei auswählen"/"Choose file") folgt in Chrome/Edge immer der
   Browser-Sprache, nicht der Seitensprache - bei einem Sprachumschalter auf
   der Seite selbst wirkungslos. Der eigentliche Input bleibt technisch
   vorhanden (Klick per JS), nur sein natives Label wird nie angezeigt. */
.file-picker-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* --- Login-Bildschirm ---------------------------------------------------- */
.login-screen {
  min-height: 70vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.login-card {
  position: relative;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  padding: 32px 36px;
  width: 100%;
  max-width: 380px;
  box-shadow: 0 8px 24px rgba(33, 35, 45, 0.08);
  text-align: center;
}

.login-card .brand { margin-bottom: 18px; }
.login-card .brand__row { justify-content: center; }

.login-card h2 { margin-bottom: 4px; }

.login-card form-row,
.login-card .field { text-align: left; margin-bottom: 14px; }

/* --- Sprachumschalter (DE/EN) -------------------------------------------- */
.lang-toggle { display: flex; gap: 4px; }
.lang-btn {
  padding: 3px 9px;
  font-size: 0.72rem;
  border-radius: 999px;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text-muted);
  font-weight: 700;
  cursor: pointer;
}
.lang-btn:hover { background: var(--color-bg); }
.lang-btn.is-active { background: var(--color-accent); border-color: var(--color-accent); color: #fff; }
.login-card .lang-toggle {
  position: absolute;
  top: 14px;
  right: 14px;
}


/* Multi-Lumen, Schritt 1: Umschalter Einzeldatei / Zusammenfuehren / Excel-Import */
.ml-mode-switch { display: flex; gap: 8px; flex-wrap: wrap; margin: 4px 0 14px; }
.ml-mode-switch label {
  display: inline-flex; align-items: center; gap: 6px; margin: 0;
  padding: 7px 12px; border: 1px solid #e3e4e9; border-radius: 8px;
  cursor: pointer; font-weight: 600; font-size: 0.86rem;
}
.ml-mode-switch input { width: auto; margin: 0; }
.ml-mode-switch label.is-active { border-color: var(--color-accent); color: var(--color-accent); background: #fdeceb; }

/* LDT-Vergleich: Bewertungs-Chips */
.rating-chip { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 0.8rem; font-weight: 600; white-space: nowrap; }
.rating-chip--good { background: var(--color-success-bg); color: var(--color-success-text); }
.rating-chip--warn { background: var(--color-warning-bg); color: var(--color-warning-text); }
.rating-chip--bad { background: var(--color-error-bg); color: var(--color-error-text); }
.rating-chip--error { background: var(--color-bg); color: var(--color-text-muted); }

/* Konto-Menue (Einstellungen/Admin/Abmelden), oben rechts unter dem
   Mandantennamen - ersetzt die vorherigen eigenen Register-Reiter, siehe
   Chat: "jetzt wird es eng mit den Registern". */
.account-menu { position: relative; display: inline-block; margin-top: 6px; }
.account-menu__trigger {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 5px 10px; font-size: 0.8rem;
}
.account-menu__dropdown {
  display: none;
  position: absolute; right: 0; top: calc(100% + 4px); z-index: 40;
  min-width: 180px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-card);
  box-shadow: 0 6px 18px rgba(33, 35, 45, 0.18);
  padding: 6px;
  text-align: left;
}
.account-menu__dropdown.is-open { display: block; }
.account-menu__item {
  display: block; width: 100%; text-align: left;
  padding: 8px 10px; border-radius: 6px;
  font-weight: 500; font-size: 0.86rem;
  background: none; border: none; color: var(--color-text);
}
.account-menu__item:hover { background: var(--color-bg); }
.account-menu__divider { border: none; border-top: 1px solid var(--color-border); margin: 6px 2px; }

/* --- Tender Text Creator ------------------------------------------------ */
#tab-tender select {
  padding: 7px 10px; border: 1px solid var(--color-border); border-radius: var(--radius-input);
  width: 100%; box-sizing: border-box; font-family: var(--font-family); font-size: 0.9rem;
  background: var(--color-surface); color: var(--color-text);
}
#tab-tender .tt-row select { width: auto; }
#tab-tender textarea:focus, #tab-tender select:focus { outline: none; border-color: var(--color-accent); box-shadow: 0 0 0 3px var(--color-accent-soft); }
.tt-row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.tt-row input[type=file] { flex: 1; min-width: 200px; }
.tt-grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px 16px; }
.tt-textarea {
  width: 100%; box-sizing: border-box; font-family: var(--font-family); font-size: 0.9rem; line-height: 1.5;
  padding: 8px 10px; border: 1px solid var(--color-border); border-radius: var(--radius-input); resize: vertical;
}
.tt-preview {
  white-space: pre-wrap; word-break: break-word; font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  font-size: 0.84rem; line-height: 1.5; background: var(--color-bg); border: 1px solid var(--color-border);
  border-radius: var(--radius-input); padding: 12px 14px; margin-top: 10px; max-height: 520px; overflow: auto;
}
.tt-table-wrap { max-height: 420px; overflow: auto; margin-top: 6px; border: 1px solid var(--color-border); border-radius: var(--radius-input); }
.tt-table-wrap table { margin-top: 0; }
.tt-table-wrap thead th { position: sticky; top: 0; z-index: 1; }
.tt-table-wrap input[type=checkbox] { width: auto; margin: 0; }
.tt-options { margin-top: 12px; display: flex; flex-direction: column; gap: 6px; }
.tt-options label.checkbox-row { font-weight: 400; font-size: 0.88rem; color: var(--color-text); margin: 0; }
.tt-options input[type=checkbox] { width: auto; margin: 0; }
.tt-options input[type=radio] { width: auto; margin: 0; }
.tt-target { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; padding-top: 8px; border-top: 1px solid var(--color-border); }
#ttFolderRow { margin-left: 24px; }
.tt-guidance {
  background: #eef4fb; border: 1px solid #cfe0f3; color: #24466b; border-radius: var(--radius-input);
  padding: 10px 12px; font-size: 0.86rem; line-height: 1.5;
}