/*
 * Immo CRM — die Optik von onOffice enterprise.
 *
 * Bewusst NICHT der Hausstil des Intranets: Nachgebildet wird eine fremde
 * Anwendung, und wer sie kennt, soll sie wiedererkennen. Deshalb die eigene
 * Grotesk, die schmale Symbolleiste links, die dichte Tabelle und die
 * Seitenspalte rechts.
 *
 * DIE FARBTOKEN STEHEN AUF ZWEI SELEKTOREN — auf der Hülle UND auf dem
 * Dialoghintergrund. Dialoge hängen an `document.body` und lägen sonst
 * ausserhalb: Beim Fin CRM stand der Speichern-Knopf dadurch weiss auf weiss.
 * Das war ein echter Fehler, keine Vorsichtsmassnahme.
 */

.in-oo,
.in-oo-dialog-hintergrund {
  --oo-navy: #10274c;
  --oo-blau: #2c5c94;
  --oo-rot: #c0392b;
  --oo-gruen: #3f9d54;
  --oo-gelb: #e0a828;
  --oo-grau-900: #23282e;
  --oo-grau-700: #4a5560;
  --oo-grau-500: #7d8792;
  --oo-grau-300: #cdd3d9;
  --oo-grau-200: #e2e6ea;
  --oo-grau-100: #f1f3f5;
  --oo-weiss: #fff;
  --oo-schrift: "Segoe UI", "Helvetica Neue", Arial, sans-serif;
}

/* Die Anwendung nimmt die volle Breite - eine Maklersoftware in einer
   900-px-Spalte zeigt drei Tabellenspalten und scrollt für den Rest. */
body.in-oo-flush .main-content,
body.in-oo-flush .content-area {
  max-width: none;
  padding: 0;
}

.in-oo {
  font-family: var(--oo-schrift);
  font-size: 13px;
  color: var(--oo-grau-900);
  background: var(--oo-grau-100);
}

.in-oo-rahmen {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) 250px;
  min-height: calc(100vh - 64px);
}

/* ---------- Symbolleiste links ---------- */

.in-oo-leiste {
  background: var(--oo-weiss);
  border-right: 1px solid var(--oo-grau-300);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 10px 0;
}

.in-oo-marke {
  width: 30px;
  height: 30px;
  color: var(--oo-navy);
  margin-bottom: 10px;
}

.in-oo-marke svg { width: 100%; height: 100%; }

.in-oo-sym {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--oo-grau-500);
  cursor: pointer;
  transition: background 150ms ease, color 150ms ease;
}

.in-oo-sym svg { width: 20px; height: 20px; }
.in-oo-sym:hover { background: var(--oo-grau-100); color: var(--oo-navy); }
.in-oo-sym.is-an { background: var(--oo-navy); color: var(--oo-weiss); }
.in-oo-sym:focus-visible { outline: 2px solid var(--oo-blau); outline-offset: 2px; }

/* ---------- Mitte ---------- */

.in-oo-mitte {
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: var(--oo-weiss);
}

.in-oo-kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 0 14px;
  height: 34px;
  border-bottom: 1px solid var(--oo-grau-300);
  background: var(--oo-weiss);
  font-size: 12px;
}

.in-oo-menue { display: flex; align-items: center; gap: 16px; }
.in-oo-menue span { color: var(--oo-grau-700); }

.in-oo-menue button {
  border: 1px solid var(--oo-grau-300);
  background: var(--oo-grau-100);
  border-radius: 4px;
  padding: 2px 10px;
  font: inherit;
  cursor: pointer;
}

.in-oo-kopf-rechts { display: flex; align-items: center; gap: 12px; }
.in-oo-produkt { color: var(--oo-grau-500); }

.in-oo-lokal {
  background: #fdf3d8;
  border: 1px solid var(--oo-gelb);
  color: #7a5c12;
  border-radius: 4px;
  padding: 1px 8px;
}

.in-oo-arbeit {
  flex: 1;
  overflow: auto;
  padding: 14px;
}

/* ---------- Kacheln und Karten ---------- */

.in-oo-kachelfeld {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}

.in-oo-kachel {
  background: var(--oo-weiss);
  border: 1px solid var(--oo-grau-300);
  border-top: 3px solid var(--oo-navy);
  border-radius: 4px;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.in-oo-kachel strong { font-size: 22px; font-weight: 600; line-height: 1.15; }
.in-oo-kachel-titel { color: var(--oo-grau-500); font-size: 11px; text-transform: uppercase;
  letter-spacing: 0.04em; }
.in-oo-kachel-zusatz { color: var(--oo-grau-500); font-size: 11px; }

.in-oo-raster {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
  gap: 10px;
}

.in-oo-karte {
  background: var(--oo-weiss);
  border: 1px solid var(--oo-grau-300);
  border-radius: 4px;
  padding: 12px;
  min-width: 0;
}

.in-oo-karte h2 {
  margin: 0 0 10px;
  font-size: 13px;
  font-weight: 600;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--oo-grau-200);
}

/* ---------- Tabellen ---------- */

.in-oo-tab {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}

.in-oo-tab th {
  text-align: left;
  font-weight: 600;
  color: var(--oo-grau-700);
  padding: 6px 8px;
  border-bottom: 1px solid var(--oo-grau-300);
  white-space: nowrap;
  background: var(--oo-grau-100);
  position: sticky;
  top: 0;
  z-index: 1;
}

.in-oo-tab td {
  padding: 5px 8px;
  border-bottom: 1px solid var(--oo-grau-200);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 260px;
}

.in-oo-tab .r { text-align: right; }
.in-oo-tab tbody tr:nth-child(even) { background: #fafbfc; }
.in-oo-tab-klick tbody tr { cursor: pointer; }
.in-oo-tab-klick tbody tr:hover { background: #eaf1fa; }
.in-oo-tab tbody tr:focus-visible { outline: 2px solid var(--oo-blau); outline-offset: -2px; }
.in-oo-tab tr.ist-erledigt td { color: var(--oo-grau-500); text-decoration: line-through; }

.in-oo-eng { width: 1%; white-space: nowrap; }
.in-oo-nr { font-variant-numeric: tabular-nums; font-weight: 600; }
.in-oo-preis { font-variant-numeric: tabular-nums; }

.in-oo-ampel {
  display: inline-block;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--oo-grau-300);
}
.in-oo-ampel.ist-gruen { background: var(--oo-gruen); }
.in-oo-ampel.ist-gelb { background: var(--oo-gelb); }
.in-oo-ampel.ist-grau { background: var(--oo-grau-300); }

.in-oo-kuerzel {
  display: inline-block;
  min-width: 26px;
  text-align: center;
  padding: 1px 4px;
  border-radius: 3px;
  background: var(--oo-grau-100);
  border: 1px solid var(--oo-grau-300);
  font-size: 11px;
  color: var(--oo-grau-700);
}

.in-oo-haken {
  width: 18px; height: 18px;
  border: 1px solid var(--oo-grau-300);
  border-radius: 3px;
  background: var(--oo-weiss);
  cursor: pointer;
  line-height: 1;
  font-size: 12px;
  color: var(--oo-gruen);
}
.in-oo-haken.ist-an { background: #eef7f0; border-color: var(--oo-gruen); }

.in-oo-blass { color: var(--oo-grau-500); }

.in-oo-leer {
  color: var(--oo-grau-500);
  margin: 6px 0;
  font-size: 12px;
}
.in-oo-leer-gross { padding: 40px 0; text-align: center; font-size: 13px; }

/* ---------- Akte ---------- */

.in-oo-akte {
  display: grid;
  grid-template-columns: 190px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
}

.in-oo-akte-kopf {
  background: var(--oo-weiss);
  border: 1px solid var(--oo-grau-300);
  border-radius: 4px;
  padding: 12px;
  position: sticky;
  top: 0;
}

.in-oo-akte-nr {
  display: block;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--oo-grau-500);
  margin-top: 10px;
}
.in-oo-akte-kopf > :first-child { margin-top: 0; }
.in-oo-akte-kopf strong { font-size: 17px; font-weight: 600; }
.in-oo-akte-preis { color: var(--oo-navy); }
.in-oo-akte-kopf p { margin: 2px 0 0; line-height: 1.45; }

.in-oo-reiter {
  display: flex;
  gap: 2px;
  border-bottom: 1px solid var(--oo-grau-300);
  overflow-x: auto;
}

.in-oo-reiter button {
  border: none;
  background: transparent;
  padding: 7px 14px;
  font: inherit;
  color: var(--oo-grau-700);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
}
.in-oo-reiter button:hover { color: var(--oo-navy); }
.in-oo-reiter button.is-an { color: var(--oo-navy); border-bottom-color: var(--oo-navy); font-weight: 600; }

.in-oo-akte-flaeche { padding-top: 12px; }

.in-oo-spalten {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(310px, 1fr));
  gap: 14px;
}

.in-oo-gruppe {
  background: var(--oo-weiss);
  border: 1px solid var(--oo-grau-300);
  border-radius: 4px;
  padding: 12px;
}

.in-oo-gruppe h3 {
  margin: 0 0 8px;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--oo-grau-700);
}

.in-oo-feld {
  display: grid;
  grid-template-columns: 44% minmax(0, 1fr);
  gap: 8px;
  padding: 4px 0;
  border-bottom: 1px solid var(--oo-grau-200);
}
.in-oo-feld:last-child { border-bottom: none; }
.in-oo-feld-name { color: var(--oo-grau-700); }
.in-oo-feld-wert { overflow-wrap: anywhere; }

.in-oo-verlauf { list-style: none; margin: 0; padding: 0; }
.in-oo-verlauf li {
  display: grid;
  grid-template-columns: 130px 110px minmax(0, 1fr) auto;
  gap: 10px;
  padding: 6px 0;
  border-bottom: 1px solid var(--oo-grau-200);
}
.in-oo-verlauf-zeit { color: var(--oo-grau-500); font-variant-numeric: tabular-nums; }
.in-oo-verlauf-art { color: var(--oo-navy); font-weight: 600; }

/* ---------- Diagramme ---------- */

.in-oo-torte {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

/* PFLICHT, siehe diagramme.js: Ohne beides schrumpft das SVG als Flex-Kind
   auf die Ersatzhöhe von 150 px und schneidet sich ab. */
.in-oo-torte svg {
  flex: 0 0 auto;
  width: 130px;
  aspect-ratio: 1 / 1;
}

.in-oo-torte-zahl { font-size: 19px; font-weight: 600; fill: var(--oo-grau-900); }
.in-oo-torte-text { font-size: 8px; fill: var(--oo-grau-500); }

.in-oo-legende { list-style: none; margin: 0; padding: 0; flex: 1; min-width: 150px; }
.in-oo-legende li {
  display: grid;
  grid-template-columns: 12px minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 8px;
  padding: 3px 0;
}
.in-oo-legende em { color: var(--oo-grau-500); font-style: normal; min-width: 34px; text-align: right; }

.in-oo-punkt-farbe { width: 10px; height: 10px; border-radius: 2px; }

.in-oo-balken { list-style: none; margin: 0; padding: 0; }
.in-oo-balken li {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr) 30px;
  align-items: center;
  gap: 10px;
  padding: 4px 0;
}
.in-oo-balken-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.in-oo-balken-spur { background: var(--oo-grau-100); border-radius: 3px; height: 12px; }
.in-oo-balken-wert { display: block; height: 100%; border-radius: 3px; background: var(--oo-blau); }
.in-oo-balken strong { text-align: right; font-variant-numeric: tabular-nums; }

/* ---------- Seitenspalte ---------- */

.in-oo-spalte {
  background: var(--oo-weiss);
  border-left: 1px solid var(--oo-grau-300);
  padding: 10px;
  overflow: auto;
}

.in-oo-spalte-block { margin-bottom: 16px; }

.in-oo-spalte h3 {
  margin: 0 0 8px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--oo-weiss);
  background: var(--oo-navy);
  padding: 5px 8px;
  border-radius: 3px;
}

.in-oo-spalte input[type="search"] {
  width: 100%;
  padding: 5px 8px;
  border: 1px solid var(--oo-grau-300);
  border-radius: 3px;
  font: inherit;
}

.in-oo-schalter {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  color: var(--oo-grau-700);
}

.in-oo-mini { list-style: none; margin: 0; padding: 0; }
.in-oo-mini li {
  display: grid;
  grid-template-columns: 8px minmax(0, 1fr) auto;
  gap: 6px;
  align-items: center;
  padding: 4px 0;
  border-bottom: 1px solid var(--oo-grau-200);
  font-size: 12px;
}
.in-oo-mini em { color: var(--oo-grau-500); font-style: normal; font-size: 11px; }

.in-oo-punkt { width: 8px; height: 8px; border-radius: 50%; background: var(--oo-rot); }
.in-oo-punkt.ist-arbeit { background: var(--oo-gelb); }

/* ---------- Fusszeile ---------- */

.in-oo-fuss {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  border-top: 1px solid var(--oo-grau-300);
  background: var(--oo-grau-100);
}

.in-oo-fuss button {
  border: 1px solid var(--oo-grau-300);
  background: var(--oo-weiss);
  border-radius: 3px;
  padding: 4px 12px;
  font: inherit;
  cursor: pointer;
}
.in-oo-fuss button:hover { border-color: var(--oo-blau); color: var(--oo-blau); }
.in-oo-fuss .in-oo-gefahr:hover { border-color: var(--oo-rot); color: var(--oo-rot); }
.in-oo-fuss-zahl { margin-left: auto; color: var(--oo-grau-500); font-size: 12px; }

/* ---------- Dialoge ---------- */

.in-oo-dialog-hintergrund {
  position: fixed;
  inset: 0;
  background: rgba(16, 39, 76, 0.45);
  display: grid;
  place-items: center;
  z-index: 1000;
  padding: 20px;
  font-family: var(--oo-schrift);
  font-size: 13px;
  color: var(--oo-grau-900);
}

.in-oo-dialog {
  background: var(--oo-weiss);
  border-radius: 5px;
  width: min(860px, 100%);
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.3);
}

.in-oo-dialog header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid var(--oo-grau-300);
}
.in-oo-dialog h2 { margin: 0; font-size: 15px; font-weight: 600; }

.in-oo-dialog-zu {
  border: none;
  background: transparent;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  color: var(--oo-grau-500);
}

.in-oo-dialog form { display: flex; flex-direction: column; min-height: 0; }
.in-oo-dialog-feld { overflow: auto; padding: 14px 16px; }

.in-oo-dialog fieldset {
  border: 1px solid var(--oo-grau-300);
  border-radius: 4px;
  padding: 10px 12px 12px;
  margin: 0 0 12px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 8px 14px;
}

.in-oo-dialog legend {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--oo-grau-700);
  padding: 0 6px;
}

.in-oo-eingabe { display: flex; flex-direction: column; gap: 3px; }
.in-oo-eingabe.ist-breit { grid-column: 1 / -1; }
.in-oo-eingabe span { color: var(--oo-grau-700); font-size: 12px; }

.in-oo-eingabe input,
.in-oo-eingabe select {
  padding: 5px 8px;
  border: 1px solid var(--oo-grau-300);
  border-radius: 3px;
  font: inherit;
  background: var(--oo-weiss);
  color: var(--oo-grau-900);
}
.in-oo-eingabe input:focus,
.in-oo-eingabe select:focus { outline: 2px solid var(--oo-blau); outline-offset: -1px; }

.in-oo-dialog footer {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 12px 16px;
  border-top: 1px solid var(--oo-grau-300);
}

.in-oo-knopf {
  background: var(--oo-navy);
  color: var(--oo-weiss);
  border: 1px solid var(--oo-navy);
  border-radius: 3px;
  padding: 6px 18px;
  font: inherit;
  cursor: pointer;
}
.in-oo-knopf:hover { background: #16346a; }

.in-oo-knopf-still {
  background: var(--oo-weiss);
  color: var(--oo-grau-700);
  border: 1px solid var(--oo-grau-300);
  border-radius: 3px;
  padding: 6px 16px;
  font: inherit;
  cursor: pointer;
}

/* ---------- Schmale Fenster ---------- */

@media (max-width: 1100px) {
  .in-oo-rahmen { grid-template-columns: 52px minmax(0, 1fr); }
  .in-oo-spalte { display: none; }
}

@media (max-width: 720px) {
  .in-oo-akte { grid-template-columns: minmax(0, 1fr); }
  .in-oo-akte-kopf { position: static; }
  .in-oo-menue span { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .in-oo-sym { transition: none; }
}

/* ---------- Übernahme aus onOffice ---------- */

.in-oo-uebernahme {
  display: grid;
  gap: 12px;
  max-width: 900px;
}

.in-oo-uebernahme p { margin: 0 0 10px; line-height: 1.55; }

.in-oo-datei {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border: 1px dashed var(--oo-grau-300);
  border-radius: 4px;
  padding: 14px 16px;
  cursor: pointer;
  background: var(--oo-grau-100);
}

.in-oo-datei:hover { border-color: var(--oo-blau); }
.in-oo-datei span { color: var(--oo-grau-700); }

.in-oo-vorschau { margin-top: 14px; }
.in-oo-vorschau h3 { margin: 0 0 10px; font-size: 13px; font-weight: 600; }

.in-oo-probe {
  background: var(--oo-grau-100);
  border-left: 3px solid var(--oo-blau);
  padding: 8px 12px;
  font-size: 12px;
}

/* Gelb, nicht rot: Es ist kein Fehler, sondern eine Anmerkung zum Bestand. */
.in-oo-warnung {
  background: #fdf3d8;
  border-left: 3px solid var(--oo-gelb);
  padding: 8px 12px;
  font-size: 12px;
}

.in-oo-fehler {
  background: #fdeaea;
  border-left: 3px solid var(--oo-rot);
  padding: 8px 12px;
  font-size: 12px;
  color: #8c241a;
}

.in-oo-fertig {
  background: #eaf6ed;
  border-left: 3px solid var(--oo-gruen);
  padding: 8px 12px;
  font-size: 12px;
}

.in-oo-hinweis-klein { font-size: 12px; color: var(--oo-grau-500); }

.in-oo-vorschau progress {
  width: 100%;
  height: 10px;
  margin: 10px 0 4px;
}

.in-oo-vorschau .in-oo-knopf { margin-top: 4px; }