/* ==== TVIP_CSS_VERSION: 1.2.0 ==== */
:root{
  /* neutrale TVIP-Vars, mappen auf deine bestehenden Farben falls genutzt */
  --tvip-radius: 14px;
  --tvip-border: var(--border, #e5e7ef);
  --tvip-bg: var(--panel, #fff);
  --tvip-muted: var(--muted, #6b7280);
  --tvip-shadow: 0 1px 2px rgba(0,0,0,.04);
}
/* Utilities (optional nutzbar, verändert nichts Bestehendes) */
.tvip-muted{ color: var(--tvip-muted); }
.tvip-card{
  /* nur für neue Boxen gedacht – deine bestehenden .tvip-card bleiben wie sie sind */
  border:1px solid var(--tvip-border);
  border-radius:var(--tvip-radius);
  background:var(--tvip-bg);
  box-shadow:var(--tvip-shadow);
}
:root{
  --bg:#f7f8fa; --panel:#fff; --text:#1a1f36; --muted:#5b6476; --border:#e5e7ef; --accent:#215cff; --accent-soft:#e9efff;
}
html,body{background:var(--bg);color:var(--text);font:14px/1.45 system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,"Noto Sans",sans-serif;margin:0}
.tvip-wrap{max-width:980px;margin:24px auto;padding:0 16px}
.tvip-card{background:var(--panel);border:1px solid var(--border);border-radius:10px;box-shadow:0 1px 2px rgba(16,24,40,.04)}
.tvip-header{padding:14px 16px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between}
.tvip-sub{color:var(--muted);font-size:12px}
.tvip-content{padding:14px 16px}
.tvip-tabs{display:flex;gap:6px;padding:8px 8px 0;border-bottom:1px solid var(--border)}
.tvip-tabs button{appearance:none;border:1px solid var(--border);background:#fff;border-bottom:none;border-radius:8px 8px 0 0;padding:8px 12px;cursor:pointer;font-weight:600;color:var(--muted)}
.tvip-tabs button.active{color:var(--text);background:var(--accent-soft);border-color:#d7def6}
.tvip-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.tvip-field{display:flex;flex-direction:column;gap:6px}
.tvip-field.full{grid-column:1/-1}

.tvip-field label{
  font-size:12px;
  color:var(--muted);
  font-weight:700;
  display:flex;
  align-items:center;
  gap:.5rem;
}

/* "i"-Icon + Tooltip */
.tvip-hint{
  position:relative;
  display:inline-flex;
  justify-content:center;
  align-items:center;
  width:1.1em;height:1.1em;
  font-size:.78em;font-weight:700;line-height:1;
  border:1px solid currentColor;border-radius:50%;
  background:#fff;
  padding:0;
  cursor:help;user-select:none;
}

/* Tooltip-Bubble */
.tvip-hint::after{
  content:attr(data-hint);
  position:absolute;left:50%;bottom:100%;
  transform:translate(-50%,-8px);
  padding:.5rem .6rem;border-radius:.4rem;
  background:#111;color:#fff;font-size:.85em;line-height:1.2;
  width:max-content;max-width:32rem;
  box-shadow:0 6px 20px rgba(0,0,0,.25);
  opacity:0;pointer-events:none;
  transition:opacity .12s ease, transform .12s ease;
  white-space:normal;
}

/* Kleiner Pfeil */
.tvip-hint::before{
  content:"";
  position:absolute;left:50%;bottom:calc(100% - 2px);
  transform:translateX(-50%);
  border:6px solid transparent;border-top-color:#111;
  opacity:0;transition:opacity .12s ease;
}

/* Anti-Clipping + Stacking */
.tvip-card,
.tvip-content,
.tvip-row,
.tvip-field,
.tvip-field label{
  overflow: visible;
  position: relative;
}
.tvip-hint{ z-index: 10; }
.tvip-hint::after,
.tvip-hint::before{ z-index: 9999; }

/* Tooltip zeigen (Hover + Fokus inkl. Windows-Chrome) */
.tvip-hint:hover::after,
.tvip-hint:focus::after,
.tvip-hint:focus-visible::after,
.tvip-hint:hover::before,
.tvip-hint:focus::before,
.tvip-hint:focus-visible::before{
  opacity: 1;
  transform: translate(-50%, -12px);
}

.tvip-input,.tvip-select,.tvip-textarea{border:1px solid var(--border);border-radius:8px;padding:10px 12px;background:#fff;color:var(--text);outline:none}
.tvip-textarea{resize:vertical;min-height:110px}
.tvip-input:focus,.tvip-select:focus,.tvip-textarea:focus{border-color:#c7d2fe;box-shadow:0 0 0 3px #e5ecff}
.tvip-checks{display:flex;gap:12px;flex-wrap:wrap}
.tvip-chk{display:flex;gap:8px;align-items:center;padding:8px 10px;border:1px solid var(--border);border-radius:8px;background:#fff}
.tvip-toolbar{display:flex;gap:10px;flex-wrap:wrap;padding:12px 16px;border-top:1px solid var(--border);background:linear-gradient(#fafbff,#fff)}
.tvip-btn{appearance:none;border:1px solid var(--border);background:#fff;border-radius:8px;padding:10px 14px;cursor:pointer;font-weight:700}
.tvip-primary{background:var(--accent);border-color:var(--accent);color:#fff}
.tvip-code{font:12.5px/1.45 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;background:#f6f7fb;border:1px solid var(--border);border-radius:8px;padding:12px;white-space:pre;overflow:auto;max-height:420px}
@media (max-width:860px){.tvip-row{grid-template-columns:1fr}}

/* === Android Apps UI (Medium/Expert) === */
.android-apps-head{display:flex;align-items:center;justify-content:space-between;border:1px solid #e5e7eb;border-radius:14px;padding:12px 16px;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.04)}
.android-apps-title h3{font-size:16px;font-weight:600}
.android-apps-sub{font-size:12px;color:#6b7280}
.android-apps-toggle{display:flex;align-items:center;gap:8px}
.android-apps-body{margin-top:14px}
.android-apps-hint{font-size:13px;color:#6b7280}
.android-apps-bar{display:flex;align-items:center;justify-content:space-between;margin:8px 0}
.android-apps-list{display:flex;flex-direction:column;gap:12px}
.android-app-card{border:1px solid #e5e7eb;border-radius:14px;background:#fff;padding:12px}
.android-app-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.android-app-title{display:flex;align-items:center;gap:8px}
.android-app-title .idx{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border:1px solid #e5e7eb;border-radius:8px;font-size:11px}
.android-app-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px}
.android-app-card .field{display:flex;flex-direction:column}
.android-app-card .field>label{font-size:12px;color:#6b7280;margin-bottom:4px}
.android-app-card input[type=text], .android-app-card select{border:1px solid #e5e7eb;border-radius:10px;padding:8px}
.android-app-card .cb{display:inline-flex;align-items:center;gap:8px}
.android-apps-empty{border:1px dashed #d1d5db;border-radius:14px;padding:16px;text-align:center;background:#f9fafb}
.empty-title{font-weight:600;margin-bottom:4px}
.empty-sub{font-size:13px;color:#6b7280;margin-bottom:8px}

/* === Toggle-Grids für Features & Preferences === */
.tvip-grid-head{display:flex;align-items:center;justify-content:space-between;margin:8px 0 6px}
.tvip-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px}
.tvip-toggle-card{
  display:flex;align-items:center;gap:12px;
  border:1px solid var(--tvip-border);border-radius:var(--tvip-radius);
  background:var(--tvip-bg);box-shadow:var(--tvip-shadow);
  padding:10px 12px; text-align:left; cursor:pointer; transition:box-shadow .15s, border-color .15s, background .15s;
}
.tvip-toggle-card:hover{ box-shadow:0 2px 6px rgba(0,0,0,.06); }
.tvip-toggle-card .icon{ width:36px;height:36px;display:flex;align-items:center;justify-content:center;border-radius:10px;background:#f3f4f6;font-size:18px }
.tvip-toggle-card .meta{ flex:1 1 auto; min-width:0 }
.tvip-toggle-card .meta .t{ font-weight:600 }
.tvip-toggle-card .meta .d{ font-size:12px; color:var(--tvip-muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.tvip-toggle-card .switch{ width:42px;height:24px;border-radius:999px;border:1px solid var(--tvip-border); background:#f3f4f6; position:relative; transition:background .15s, border-color .15s }
.tvip-toggle-card .switch .dot{ position:absolute; top:2px; left:2px; width:20px;height:20px; border-radius:999px; background:#fff; border:1px solid var(--tvip-border); transition:left .15s }
.tvip-toggle-card.on{ border-color:#c7d2fe; background:#f5f7ff }
.tvip-toggle-card.on .switch{ background:#dbeafe; border-color:#bfdbfe }
.tvip-toggle-card.on .switch .dot{ left:20px }


/* === Preferences (sichtbar) – Switch-Variante im Stil Basisfunktionen === */
.tvip-prefs-vd{ display:flex; flex-direction:column; gap:8px }
.tvip-pref-item{
  display:flex; align-items:center; justify-content:space-between;
  border:1px solid var(--tvip-border); border-radius: var(--tvip-radius);
  background: var(--tvip-bg); padding:10px 12px; box-shadow: var(--tvip-shadow);
  cursor:pointer; transition: box-shadow .15s, border-color .15s;
}
.tvip-pref-item:hover{ box-shadow: 0 2px 6px rgba(0,0,0,.06) }
.tvip-pref-left{ display:flex; align-items:center; gap:10px; min-width:0 }
.tvip-pref-icon{
  width:24px; height:24px; display:inline-flex; align-items:center; justify-content:center;
  border-radius:6px; background:#f3f4f6; font-size:14px; color:#111827;
}
.tvip-pref-title{ font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }

/* Switch */
.tvip-switch{ position:relative; display:inline-flex; align-items:center; gap:8px }
.tvip-switch input{ position:absolute; opacity:0; pointer-events:none }
.tvip-switch-track{
  width:44px; height:24px; border-radius:999px; border:1px solid var(--tvip-border);
  background:#eef2f7; position:relative; transition: background .15s, border-color .15s;
}
.tvip-switch-dot{
  position:absolute; top:2px; left:2px; width:20px; height:20px; border-radius:999px;
  background:#fff; border:1px solid var(--tvip-border); transition:left .15s;
}

/* checked state */
.tvip-switch input:checked + .tvip-switch-track{
  background:#dbeafe; border-color:#bfdbfe;
}
.tvip-switch input:checked + .tvip-switch-track .tvip-switch-dot{
  left:22px;
}

/* === Compact Top Trio: Region · Ort/Zone · Zeitformat === */
/* 3 schmalere Spalten – nur visuell, ohne JS-Änderungen */
.tvip-row{
  grid-template-columns: 1fr 1fr 0.8fr; /* Seite bleibt gleich breit */
}

/* Standard-Felder behalten quasi die alte Breite (2 von 3 Spalten) */
.tvip-row > .tvip-field{ grid-column: span 2; }

/* Volle Breite bleibt volle Breite */
.tvip-row > .tvip-field.full{ grid-column: 1 / -1; }

/* Nur die drei Top-Felder werden „schmal“ (je 1 Spalte) → passen zu dritt in eine Reihe */
#wrap-tz_region,
#wrap-timezone,
#wrap-time_format{
  grid-column: span 1;
}

/* Sicherheitsnetz: Controls dürfen schmal werden, ohne zu umbrechen */
#wrap-tz_region select,
#wrap-timezone select,
#wrap-time_format select{
  min-width: 0;
}

/* Zweispaltiger Bereich unter dem Top-Trio (Region/Ort/Zeitformat) */
.tvip-row-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 8px;
}

/* Spalten-Stacks */
.tvip-col {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

@media (max-width: 860px) {
  .tvip-row-2 { grid-template-columns: 1fr; }
}
/* lässt ein Element alle Spalten des Eltern-Grids einnehmen */
.tvip-span-full { grid-column: 1 / -1; }

/* Zweispaltenreihe unter dem Top-Trio */
.tvip-row-2{ display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:8px; }
.tvip-col{ display:flex; flex-direction:column; gap:12px; }
/* eigene Reihe soll die ganze Formularbreite (alle Gridspalten) einnehmen */
.tvip-span-full{ grid-column:1 / -1; }

@media (max-width:860px){
  .tvip-row-2{ grid-template-columns:1fr; }
}

/* Zweispalten-Reihen für spezielle Bereiche */
.tvip-row-2{ display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:8px; }
.tvip-col{ display:flex; flex-direction:column; gap:12px; }
/* volle Zeilenbreite in Eltern-Grid einnehmen */
.tvip-span-full{ grid-column:1 / -1; }

@media (max-width:860px){
  .tvip-row-2{ grid-template-columns:1fr; }
}

/* angenehme Höhe für die beiden Expert-Textareas */
#wrap-custom_xml .tvip-textarea,
#wrap-template_override .tvip-textarea{ min-height:220px; }

/* ==== Expert-XML Footer unten im Formular-Panel ==== */
#tvip-panel-form .tvip-content {
  display: flex;
  flex-direction: column;
}

/* Container, in den wir die beiden Expert-Textareas schieben */
#tvip-expert-xml-footer{
  margin-top: auto;            /* schiebt den Block nach unten */
  border-top: 1px solid #e5e7eb;
  padding-top: 12px;
  background: #fff;
}

/* 2 Spalten auf breiten Screens */
@media (min-width: 861px){
  #tvip-expert-xml-footer{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }
}

/* Falls noch nicht vorhanden: beide Textareas angenehm hoch */
#wrap-custom_xml .tvip-textarea,
#wrap-template_override .tvip-textarea{ min-height:220px; }

/* ==== Expert-XML Footer als 2 Spalten (roh) ==== */
#tvip-panel-form .tvip-content{
  display:flex; flex-direction:column;
}

#tvip-expert-xml-footer{
  margin-top:auto;            /* nach unten schieben */
  border-top:1px solid var(--border);
  padding-top:12px;
  background:#fff;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
}

/* „roh“: Label ausblenden, nur Textareas sichtbar */
#tvip-expert-xml-footer .tvip-textarea{ min-height:220px; }

/* Mobil: untereinander */
@media (max-width: 860px){
  #tvip-expert-xml-footer{ grid-template-columns:1fr; }
}

/* ==== Expert-XML Footer als 2 Spalten ==== */
#tvip-panel-form .tvip-content{ display:flex; flex-direction:column; }

#tvip-expert-xml-footer{
  margin-top:auto;
  border-top:1px solid var(--border);
  padding-top:12px;
  background:#fff;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
}

/* Kleine Überschrift im Footer (optional, wenn wir eine einfügen) */
#tvip-expert-xml-footer .tvip-footer-title{
  grid-column:1 / -1;
  font-size:13px;
  color:var(--muted);
  font-weight:700;
  margin:0 0 6px 0;
}

#tvip-expert-xml-footer .tvip-textarea{ min-height:220px; }

@media (max-width: 860px){
  #tvip-expert-xml-footer{ grid-template-columns:1fr; }
}

/* Basics-Footer: 2 Spalten (links Basisfunktionen, rechts Preferences) */
#tvip-basics-footer{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
  margin-top:14px;
}
#tvip-basics-footer .tvip-footer-title{
  grid-column:1/-1;
  font-weight:700;
  color:var(--muted);
  margin-bottom:6px;
}
@media (max-width:860px){
  #tvip-basics-footer{ grid-template-columns:1fr; }
}
/* Group-Box Body verstecken, wenn Box nicht aktiv ist */
.tvip-group-box:not(.is-on) .tvip-group-body{
  display:none;
}

/* Einheitlicher Toggle-Stil für alle Checkboxen im Generator */
.tvip-chk-single input[type="checkbox"] {
  -webkit-appearance: none;
  appearance: none;
  position: relative;
  width: 40px;
  height: 22px;
  margin-right: 8px;
  border-radius: 999px;
  border: 1px solid var(--tvip-border);
  background: #eef2f7;
  outline: none;
  cursor: pointer;
  transition: background .15s, border-color .15s;
  box-sizing: border-box;
}

.tvip-chk-single input[type="checkbox"]::before {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid var(--tvip-border);
  transition: transform .15s;
  box-sizing: border-box;
}

.tvip-chk-single input[type="checkbox"]:checked {
  background: #dbeafe;
  border-color: #bfdbfe;
}

.tvip-chk-single input[type="checkbox"]:checked::before {
  transform: translateX(18px);
}


/* ==== Branding-Group Box ==== */
.tvip-group-box{
  border:1px solid var(--border);
  border-radius:10px;
  padding:10px 12px;
  margin-top:12px;
  background:#f9fafb;
}

.tvip-group-box.tvip-group-branding{
  /* falls du Branding extra anders stylen willst */
}

.tvip-group-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:8px;
}

.tvip-group-title{
  font-size:13px;
  font-weight:600;
  color:var(--muted);
  text-transform:uppercase;
  letter-spacing:.04em;
}

/* Inhalt der Card: wieder 2-Spalten Grid */
.tvip-group-body{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
}

/* Wenn Branding AUS ist → Body verstecken, Rahmen etwas „gedimmt“ */
.tvip-group-box:not(.is-on) .tvip-group-body{
  display:none;
}

.tvip-group-box:not(.is-on){
  opacity:0.9;
}

/* Optional: Checkbox im Header etwas kompakter */
.tvip-group-header .tvip-field{
  margin:0;
}