/* ============================================================================
 * GES · Teklif Merkezi — Panel-Styles (Servis Merkezi → Tab „Teklifler")
 * Nutzt die Portal-Variablen (--surface/--line/--gold/…), damit Hell/Dunkel
 * ohne eigene Theme-Logik funktioniert.
 * ==========================================================================*/
.tkl-root { position: relative; display: block; }
/* display oben wuerde sonst die UA-Regel [hidden]{display:none} ueberstimmen und
   das Panel beim Tab-Wechsel stehen lassen. */
.tkl-root[hidden], #gesTeklifPanel[hidden] { display: none !important; }

/* Kopf */
/* Ohne Untertitel steht die Ueberschrift allein — mittig zu den Knoepfen daneben. */
.tkl-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin: 2px 0 14px }
.tkl-head h3 { margin: 0; font-size: 17px; font-weight: 850; color: var(--text) }
.tkl-head p { margin: 3px 0 0; font-size: 12.5px; color: var(--muted) }
.tkl-head-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap }
/* Zurueck-Knopf sieht aus wie die anderen Knoepfe, nur in Gold. */
.tkl-back { border: 1px solid rgba(247, 184, 45, .45); background: rgba(247, 184, 45, .12); color: var(--gold);
  font-size: 12.5px; font-weight: 750; padding: 8px 13px; border-radius: 9px; cursor: pointer;
  margin-bottom: 8px; transition: border-color .15s, background .15s }
.tkl-back:hover { border-color: var(--gold); background: rgba(247, 184, 45, .2) }

/* Bedienelemente */
.tkl-btn { border: 1px solid var(--line); background: var(--surface2); color: var(--text); font-size: 12.5px; font-weight: 750;
  padding: 8px 13px; border-radius: 9px; cursor: pointer; transition: border-color .15s, background .15s }
.tkl-btn:hover { border-color: rgba(247, 184, 45, .55) }
.tkl-btn-primary { background: rgba(247, 184, 45, .12); border-color: rgba(247, 184, 45, .45); color: var(--gold) }
.tkl-search { border: 1px solid var(--line); background: var(--surface2); color: var(--text); border-radius: 9px;
  padding: 8px 11px; font-size: 12.5px; min-width: 190px }
.tkl-mini { border: 1px solid var(--line); background: var(--surface); color: var(--text); font-size: 11.5px; font-weight: 700;
  padding: 4px 9px; border-radius: 7px; cursor: pointer; margin-right: 4px }
.tkl-mini:hover { border-color: rgba(247, 184, 45, .55) }
.tkl-mini.tkl-danger:hover { border-color: var(--red); color: var(--red) }
.tkl-mini.tkl-ok { border-color: rgba(82, 214, 137, .5); color: var(--green) }

/* Abschnitte + Tabellen */
.tkl-sec { margin: 18px 0 }
.tkl-sec h4 { margin: 0 0 8px; font-size: 13.5px; font-weight: 800; color: var(--text) }
.tkl-tablewrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 11px; background: var(--surface) }
.tkl-table { width: 100%; border-collapse: collapse; font-size: 12.5px; min-width: 620px }
/* Zeilen mittig (Nutzer-Wunsch): Kopf und Zellen gleich ausgerichtet, damit Spalten
   sauber untereinander stehen. Erste Spalte bleibt links — Namen lesen sich so besser. */
.tkl-table th { text-align: center; font-size: 11px; font-weight: 800; letter-spacing: .03em; text-transform: uppercase;
  color: var(--muted); padding: 10px 12px; border-bottom: 1px solid var(--line); white-space: nowrap }
.tkl-table td { padding: 10px 12px; border-bottom: 1px solid var(--line); vertical-align: middle;
  color: var(--text); text-align: center }
.tkl-table th:first-child, .tkl-table td:first-child { text-align: left }
.tkl-table td small { text-align: inherit }
.tkl-table tbody tr:last-child td { border-bottom: 0 }
.tkl-table tbody tr[data-cus] { cursor: pointer }
.tkl-table tbody tr:hover { background: var(--surface2) }
.tkl-table td small { display: block; color: var(--muted); font-size: 11px; margin-top: 2px }
/* Angebotsart: Bakım und Temizlik muessen auf einen Blick zu unterscheiden sein —
   als graue Kleinschrift gingen sie in der Zeile unter. */
.tkl-kind { display: inline-block; margin: 4px 0 0 10px; padding: 3px 10px; border-radius: 999px;
  font-size: 10.5px; font-weight: 800; letter-spacing: .2px; white-space: nowrap;
  color: var(--k); border: 1px solid color-mix(in srgb, var(--k) 45%, transparent);
  background: color-mix(in srgb, var(--k) 12%, transparent) }
/* Filterchips tragen dieselbe Farbe wie die Kennzeichnung, damit der Bezug klar ist. */
.tkl-kind-chip.tkl-kind-bakim { border-color: color-mix(in srgb, var(--gold) 45%, transparent); color: var(--gold) }
.tkl-kind-chip.tkl-kind-temizlik { border-color: color-mix(in srgb, var(--blue) 45%, transparent); color: var(--blue) }
.tkl-filterbar .tkl-allq { min-width: 240px; margin-left: auto }
/* Nur abgeleitete Anlagenadresse (Portal-Ort bzw. Kundenadresse): sichtbar als
   „noch nicht gepflegt" markiert — sie fuellt sonst still das Angebot. */
.tkl-table td small.tkl-addr-derived { color: #b08312; font-style: italic }
.tkl-num { text-align: center; white-space: nowrap; font-variant-numeric: tabular-nums }
/* Aktions-Knoepfe linksbuendig und in einer Reihe — rechtsbuendig standen die
   Zeilen mit unterschiedlich vielen Knoepfen versetzt untereinander. */
.tkl-row-actions { text-align: left; white-space: nowrap }
.tkl-row-actions .tkl-mini { margin: 0 6px 0 0; vertical-align: middle }
.tkl-row-actions .tkl-mini:last-child { margin-right: 0 }
.tkl-empty { padding: 22px; text-align: center; color: var(--muted); font-size: 12.5px;
  border: 1px dashed var(--line); border-radius: 11px; background: var(--surface) }

/* Status + Marker */
.tkl-status { display: inline-flex; align-items: center; gap: 5px; font-weight: 800; font-size: 11.5px; color: var(--c) }
.tkl-status::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--c) }
.tkl-pill { display: inline-block; font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 999px;
  border: 1px solid var(--line); color: var(--muted) }
.tkl-pill-ok { color: var(--green); border-color: rgba(82, 214, 137, .45); background: rgba(82, 214, 137, .1) }

/* Kundenordner */
.tkl-upload { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 9px }
.tkl-upload input[type=text] { border: 1px solid var(--line); background: var(--surface2); color: var(--text);
  border-radius: 9px; padding: 7px 10px; font-size: 12.5px }
.tkl-upload input[type=file] { font-size: 12px; color: var(--muted) }

/* Schloss */
.tkl-lock { max-width: 420px; margin: 40px auto; text-align: center; padding: 26px 22px;
  border: 1px solid var(--line); border-radius: 14px; background: var(--surface) }
.tkl-lock-ic { color: var(--gold); margin-bottom: 8px }
.tkl-lock h3 { margin: 0 0 6px; font-size: 16px; font-weight: 850; color: var(--text) }
.tkl-lock p { margin: 0 0 16px; font-size: 12.5px; color: var(--muted) }
.tkl-lock small { display: block; margin-top: 12px; font-size: 11.5px; color: var(--muted) }
.tkl-lock-form { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap }
.tkl-lock-form input { border: 1px solid var(--line); background: var(--surface2); color: var(--text);
  border-radius: 9px; padding: 9px 12px; font-size: 13px; min-width: 190px }

/* Dialoge */
.tkl-modal { position: fixed; inset: 0; z-index: 90; background: rgba(6, 12, 22, .55);
  display: flex; align-items: flex-start; justify-content: center; padding: 5vh 16px; overflow-y: auto }
.tkl-modal-box { width: 100%; max-width: 520px; background: var(--surface); border: 1px solid var(--line);
  border-radius: 14px; box-shadow: 0 18px 50px rgba(0, 0, 0, .35) }
.tkl-modal-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; border-bottom: 1px solid var(--line) }
.tkl-modal-head h4 { margin: 0; font-size: 14.5px; font-weight: 850; color: var(--text) }
.tkl-modal-x { border: 0; background: none; color: var(--muted); font-size: 22px; line-height: 1; cursor: pointer }
.tkl-form { padding: 14px 16px 16px }
.tkl-fld { display: block; margin-bottom: 10px }
.tkl-fld > span { display: block; font-size: 11.5px; font-weight: 700; color: var(--muted); margin-bottom: 4px }
.tkl-fld input, .tkl-fld select, .tkl-fld textarea { width: 100%; box-sizing: border-box; border: 1px solid var(--line);
  background: var(--surface2); color: var(--text); border-radius: 9px; padding: 8px 10px; font-size: 12.5px; font-family: inherit }
.tkl-fld-row { display: flex; align-items: center; gap: 8px }
.tkl-fld-row input { width: auto }
.tkl-fld-row > span { margin: 0 }
.tkl-hint { font-size: 11.5px; color: var(--muted); margin: -4px 0 10px }
.tkl-linkbtn { border: 0; background: none; padding: 0; color: var(--gold); font: inherit; font-weight: 750;
  text-decoration: underline; cursor: pointer }
.tkl-form-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 6px }
.tkl-detail { display: flex; gap: 18px; flex-wrap: wrap; margin-bottom: 12px }
.tkl-detail span { display: block; font-size: 11px; color: var(--muted) }
.tkl-detail b { font-size: 13px; color: var(--text) }
.tkl-hist-h { margin: 14px 0 6px; font-size: 12.5px; font-weight: 800; color: var(--text) }
.tkl-hist { list-style: none; margin: 0; padding: 0; max-height: 190px; overflow-y: auto }
.tkl-hist li { padding: 7px 0; border-bottom: 1px solid var(--line); font-size: 12px; color: var(--text) }
.tkl-hist li:last-child { border-bottom: 0 }
.tkl-hist small { display: block; color: var(--muted); font-size: 11px; margin-top: 2px }

/* Meldung */
.tkl-toast { display: none; position: sticky; top: 6px; z-index: 20; margin-bottom: 10px; padding: 9px 13px;
  border-radius: 9px; font-size: 12.5px; font-weight: 700 }
.tkl-toast.ok { background: rgba(82, 214, 137, .12); border: 1px solid rgba(82, 214, 137, .45); color: var(--green) }
.tkl-toast.bad { background: rgba(255, 107, 122, .12); border: 1px solid rgba(255, 107, 122, .45); color: var(--red) }
/* Der Hinweis haengt am <body> und steht fest oben in der Ansicht: im Panel wurde er
   vom naechsten Neuzeichnen sofort weggeworfen und war ausserdem weg vom Blickfeld,
   wenn man unten bei den Angebotszeilen stand. Deckende Flaeche, damit er lesbar
   ueber dem Inhalt liegt; Klick schliesst ihn. */
.tkl-toast-fixed { position: fixed; top: 18px; left: 50%; transform: translateX(-50%);
  z-index: 2147483000; margin: 0; max-width: min(780px, 92vw); padding: 12px 18px;
  font-size: 13.5px; line-height: 1.4; text-align: center; cursor: pointer;
  border-radius: 11px; box-shadow: 0 14px 40px rgba(0, 0, 0, .45);
  animation: tkl-toast-in .18s ease-out }
.tkl-toast-fixed.ok { background: #10321f; border-color: rgba(82, 214, 137, .75) }
.tkl-toast-fixed.bad { background: #3a1418; border-color: rgba(255, 107, 122, .75) }
@keyframes tkl-toast-in { from { opacity: 0; transform: translate(-50%, -8px) } to { opacity: 1; transform: translate(-50%, 0) } }
@media (prefers-reduced-motion: reduce) { .tkl-toast-fixed { animation: none } }
.tkl-btn-danger { border-color: rgba(255, 107, 122, .45); color: var(--red) }
.tkl-btn-danger:hover { border-color: var(--red); background: rgba(255, 107, 122, .1) }
/* Filterleiste der Gesamt-Angebotsliste */
.tkl-filterbar { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin: 0 0 10px }

/* ── Ansprechpartner beim Kunden (mehrere, mit Namen) ──────────────────────── */
.tkl-krow { display: flex; align-items: center; gap: 6px; margin: 0 0 6px }
.tkl-krow .tkl-kname { flex: 1 1 40% }
.tkl-krow .tkl-kphone { flex: 1 1 38% }
.tkl-krow input[type=text], .tkl-krow input[type=tel] { min-width: 0 }
.tkl-kwa { display: inline-flex; align-items: center; gap: 5px; flex: 0 0 auto;
  font-size: 11.5px; font-weight: 700; color: var(--muted); white-space: nowrap; cursor: pointer }
.tkl-kwa input { accent-color: var(--green, #52d689); margin: 0 }
.tkl-krow [data-k-del] { flex: 0 0 auto }
.tkl-addrow { margin-top: 2px; font-size: 12px; padding: 5px 10px }

/* ── WhatsApp-Versand eines Teklifs ────────────────────────────────────────── */
.tkl-mini.tkl-wa { border-color: rgba(37, 211, 102, .45); color: #25d366 }
.tkl-mini.tkl-wa:hover { border-color: #25d366; background: rgba(37, 211, 102, .1) }
.tkl-walist { display: flex; flex-direction: column; gap: 6px; margin: 4px 0 10px }
.tkl-warow { display: flex; align-items: center; gap: 8px; padding: 7px 10px;
  border: 1px solid var(--line); border-radius: 9px; background: var(--surface) }
.tkl-warow > label { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; cursor: pointer }
.tkl-warow > label input { accent-color: var(--green, #52d689); margin: 0; flex: 0 0 auto }
.tkl-warow b { font-size: 12.5px; font-weight: 700 }
.tkl-warow small { color: var(--muted); font-size: 11.5px }
.tkl-warow a.tkl-mini { flex: 0 0 auto; text-decoration: none; border-color: rgba(37, 211, 102, .45); color: #25d366 }
.tkl-warow a.tkl-mini:hover { border-color: #25d366; background: rgba(37, 211, 102, .1) }
.tkl-hint.tkl-warn { color: var(--red) }