/* ==========================================================
   Text-Labels-Modul
   Konfigurationsseite im selben Karten-/Akkordeon-Look wie das
   Alerts-, Chatbox-, Emote-Wand- und Event-Listen-Modul (siehe
   style/alerts.css, style/chat.css, style/emotewall.css,
   style/eventlist.css) - eigenstaendiges, auf #textPage skopiertes
   Stylesheet (tx-* Klassenpraefix), damit alle Module unabhaengig
   voneinander bleiben.

   Vorgabe: Border-Radius in diesem Modul ist ueberall maximal 3px, analog
   zur Vorgabe in den anderen Modulen - siehe Abschnitt "Radius-Cap".
   ========================================================== */


/* Login-Hinweis kommt jetzt aus dem globalen .login-notice (boxen.css). */

#textPage { display: flex; flex-direction: column; gap: 18px; }

/* ---------- OBS-Link-Zeile ---------- */
#textPage .tx-topbar {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: 3px; padding: 12px 16px;
}
#textPage .tx-topbar label {
  color: var(--text-faint); font-size: 12px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .5px; flex-shrink: 0;
}
#textPage .tx-topbar .url-box { flex: 1; min-width: 220px; }

/* ---------- Layout: Sidebar + Panel + Vorschau-Spalte ---------- */
#textPage .tx-layout { display: flex; gap: 20px; align-items: flex-start; }

#textPage .tx-sidebar {
  flex: 0 0 200px;
  min-width: 0;
  position: sticky;
  top: 20px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
#textPage .tx-sidebar-label {
  color: var(--text-faint); font-size: 12px; font-weight: 700; text-transform: uppercase;
  padding: 8px 10px 6px; letter-spacing: .5px;
}
#textPage .tx-navitem {
  display: flex; align-items: center; gap: 9px;
  padding: 9px 10px; border-radius: 3px; cursor: pointer; font-size: 14px; color: var(--text-secondary);
}
#textPage .tx-navitem:hover { background: var(--bg-raised); }
#textPage .tx-navitem.active { background: var(--accent); color: #fff; }
#textPage .tx-navicon { font-size: 15px; flex-shrink: 0; }

#textPage .tx-panel { flex: 1.3; min-width: 0; }
#textPage .tx-side { flex: 1; min-width: 0; position: sticky; top: 20px; display: flex; flex-direction: column; gap: 14px; }

/* ---------- Karten (nur die aktive ist sichtbar) ----------
   Basis + Kopf kommen vom globalen .card / .card-header (boxen.css) -
   hier bleibt nur die Sichtbarkeits-Steuerung (Tab-Umschaltung). */
#textPage .tx-card { display: none; }
#textPage .tx-card.active { display: flex; }
#textPage .tx-cardbody { display: flex; flex-direction: column; gap: 12px; }

/* ---------- Grids & Felder ---------- */
#textPage .tx-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

#textPage .tx-rangerow { display: flex; flex-direction: column; gap: 6px; }
#textPage .tx-rangetop { display: flex; justify-content: space-between; font-size: 12.5px; color: var(--text-muted); font-weight: 600; text-transform: uppercase; letter-spacing: .3px; }
#textPage .tx-rangetop .tx-val { color: var(--text-primary); font-weight: 700; text-transform: none; letter-spacing: 0; }
/* input[type="range"] -> globales input[type="range"] (formulare.css). */

/* .tx-colorrow -> globales .color-row; .tx-switch/-slider/-switchitem/
   -switchgroup -> globales .switch/.switch-slider/.switch-item/
   .switch-group (formulare.css). */

/* ---------- Vorschau-Spalte ---------- */
#textPage .tx-side h3 { margin: 0; }
#textPage .tx-stage {
  position: relative;
  flex: 1;
  min-height: 90px;
  /* Nur das Vorschau-Fenster hier auf der Einstellungsseite bekommt einen
     grauen Hintergrund, damit auch heller Text gut erkennbar ist - der
     Hintergrund der echten Overlay-Seite (OBS-Browser-Source) bleibt davon
     unberuehrt, da diese Regel ueber #textPage nur hier greift. */
  background: #c7c7ce;
  border: 1px solid var(--border);
  border-radius: 3px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 16px;
  word-break: break-word;
  text-align: center;
}
#textPage .tx-previewtext { font-weight: 700; line-height: 1.25; }
#textPage .tx-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; }
#textPage .tx-status { font-size: 13px; color: var(--mono-text); font-weight: 600; }
/* .tx-obshint -> globales .hint-box; .token-blur -> globales .token-blur
   (boxen.css / basis.css). */

/* ---------- Radius-Cap: max. 3px, auch fuer global geerbte Formularelemente ---------- */
#textPage select,
#textPage input[type="text"],
#textPage input[type="number"],
#textPage input[type="color"],
#textPage textarea,
#textPage .url-box,
#textPage .back-btn,
#textPage button {
  border-radius: 3px;
}

/* .btn-primary/.btn-ghost -> globale .btn/.btn-secondary (buttons.css). */

@media (max-width: 980px) {
  #textPage .tx-layout { flex-direction: column; }
  #textPage .tx-sidebar { position: static; width: 100%; flex-direction: row; flex-wrap: wrap; }
  #textPage .tx-side { position: static; width: 100%; }
  #textPage .tx-grid2 { grid-template-columns: 1fr; }
}