/* ==========================================================
   Ziel-Modul (bisher "Follower-Ziel-Modul", Datei umbenannt von
   style/followergoal.css -> style/goal.css im Rahmen der
   Modul-Umbenennung /followergoal -> /goal).
   Konfigurationsseite im selben Karten-Look wie Alerts, Chatbox,
   Emote-Wand, Event-Liste und Text-Labels (siehe style/alerts.css,
   style/chat.css, style/emotewall.css, style/eventlist.css,
   style/text.css) - eigenstaendiges, auf #followergoalPage
   skopiertes Stylesheet (fg-* Klassenpraefix), damit alle Module
   unabhaengig voneinander bleiben. IDs/Klassen bewusst unveraendert
   gelassen (nur die Datei heisst jetzt anders).

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

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

/* ---------- Topbar: Zieltyp-Tabs + OBS-Link ---------- */
#followergoalPage .fg-topbar { display: flex; gap: 14px; flex-wrap: wrap; align-items: stretch; }
#followergoalPage .fg-typetabsbox,
#followergoalPage .fg-obslink {
  flex: 1; min-width: 280px;
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: 3px; padding: 12px 16px;
  display: flex; flex-direction: column; gap: 8px; justify-content: center;
}
#followergoalPage .fg-topbar-label {
  color: var(--text-faint); font-size: 12px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .5px;
}
/* ---------- Zieltyp-Tabs (jetzt 5 statt 4: follow/subscribe/giftsub/bits/donation) ---------- */
#followergoalPage .fg-typetabs { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
#followergoalPage .fg-typetab {
  position: relative;
  background: var(--bg-raised); border: 1px solid var(--border); border-radius: 3px;
  padding: 7px 6px; text-align: center; cursor: pointer; min-height: 32px;
  transition: border-color 0.15s ease, background 0.15s ease;
  display: flex; align-items: center; justify-content: center; gap: 5px; overflow: hidden;
  font-size: 12.5px; font-weight: 600; color: var(--text-faint); white-space: nowrap;
}
#followergoalPage .fg-typetab:hover { border-color: var(--accent); background: var(--bg-card); }
#followergoalPage .fg-typetab--configured { border-color: var(--accent); background: rgba(145, 70, 255, 0.08); color: var(--text-primary); }
#followergoalPage .fg-typetab--active { border-color: var(--success); background: rgba(70, 209, 96, 0.1); color: var(--text-primary); }
#followergoalPage .fg-typetab-ic { font-size: 14px; line-height: 1; }
#followergoalPage .fg-multihint { margin: -8px 0 0; font-size: 12px; color: var(--text-faint); }

/* ---------- Layout: Links Einstellungs-Panel (1.3fr), Rechts Vorschau-Spalte (1fr) ---------- */
#followergoalPage .fg-layout { display: flex; gap: 20px; align-items: flex-start; }
#followergoalPage .fg-panel { flex: 1.3; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
#followergoalPage .fg-side { flex: 1; min-width: 0; position: sticky; top: 20px; display: flex; flex-direction: column; gap: 14px; }

/* ---------- Karten & Tabs außerhalb (Alerts-Look) ---------- */
#followergoalPage .fg-card-wrapper {
  display: flex;
  flex-direction: column;
}

#followergoalPage .fg-card-wrapper .tabs {
  display: flex;
  gap: 6px;
  padding-left: 2px;
}

#followergoalPage .fg-card-wrapper .tabs .tab-btn {
  background: transparent;
  border: 1px solid transparent;
  color: var(--text-muted);
  padding: 6px 12px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  border-radius: 3px 3px 0 0;
  transition: all 0.2s ease;
}

#followergoalPage .fg-card-wrapper .tabs .tab-btn:hover {
  color: var(--text-primary);
  background: rgba(255, 255, 255, 0.03);
}

#followergoalPage .fg-card-wrapper .tabs .tab-btn.active {
  color: var(--text-primary);
  background: var(--bg-card);
  border-color: var(--border);
  border-bottom-color: var(--bg-card);
  margin-bottom: -1px;
  z-index: 2;
}

#followergoalPage .fg-card-wrapper .tab-panel {
  display: none;
}

#followergoalPage .fg-card-wrapper .tab-panel.active {
  display: flex;
  flex-direction: column;
}

/* ---------- Karten ---------- */
#followergoalPage .fg-cardbody { display: flex; flex-direction: column; gap: 12px; }

/* ---------- Vorschau-Karte ---------- */
#followergoalPage .fg-preview-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 16px 16px 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
#followergoalPage .fg-preview-label {
  margin: 0;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--text-faint);
}

/* ---------- Vorschau ---------- */
#followergoalPage .fg-stage {
  background: repeating-conic-gradient(var(--bg-raised) 0% 25%, #16161a 0% 50%) 50% / 16px 16px;
  border: 1px solid var(--border);
  border-radius: 3px; overflow: hidden;
  min-height: 70px; height: 90px; position: relative;
  box-sizing: border-box;
}
#followergoalPage .fgBg { position: absolute; inset: 0; }
#followergoalPage .fgBar { position: absolute; top: 0; left: 0; bottom: 0; width: 0%; box-sizing: border-box; }
#followergoalPage .fgTextLayer {
  position: absolute; inset: 0;
  color: #fff; text-shadow: 0 2px 6px rgba(0,0,0,0.6); font-weight: 700; font-size: 13px;
  pointer-events: none;
}
#followergoalPage #fgDonePreview {
  display: none;
  position: absolute; inset: 0;
  align-items: center; justify-content: center;
  text-align: center;
  color: #fff; text-shadow: 0 2px 6px rgba(0,0,0,0.6); font-weight: 700;
  pointer-events: none;
}
#followergoalPage .fgTxt, #followergoalPage .fgPct {
  position: absolute; top: 50%; transform: translateY(-50%);
}
#followergoalPage .fgTxt { left: 16px; }
#followergoalPage .fgPct { right: 16px; font-size: 12px; opacity: 0.85; font-weight: 600; }
#followergoalPage .fg-note { font-size: 12px; color: var(--text-faint); margin: 2px 0 0; }

/* ---------- Grids & Felder ---------- */
#followergoalPage .fg-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
#followergoalPage .fg-startend-row.fg-startend-row--3col { grid-template-columns: 1fr 1fr 1fr; }

/* ---------- Aktueller Stand (zwischen Start/Ende) ---------- */
#followergoalPage .fg-currentstand-box {
  background: var(--bg-raised, var(--bg-raised));
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 10px 12px;
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  text-align: center;
}
#followergoalPage .fg-currentstand-actions { display: flex; gap: 6px; margin-top: 8px; }
#followergoalPage .fg-btn-mini {
  flex: 1;
  background: var(--bg-raised, var(--bg-raised));
  border: 1px solid var(--border);
  border-radius: 3px;
  color: var(--text-muted);
  font-size: 11.5px;
  font-weight: 600;
  font-family: var(--font-family);
  padding: 7px 6px;
  cursor: pointer;
  white-space: nowrap;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
#followergoalPage .fg-btn-mini--reset:hover { border-color: rgba(255, 80, 80, 0.5); color: #ff8a8a; background: rgba(255, 80, 80, 0.08); }
#followergoalPage .fg-btn-mini--reload:hover { border-color: rgba(127, 157, 255, 0.5); color: #a9bdff; background: rgba(127, 157, 255, 0.08); }
#followergoalPage .fg-error-note { color: #ff7a7a; }
#followergoalPage input.fg-input-error { border-color: #ff5050 !important; background: rgba(255, 80, 80, 0.06); }
#followergoalPage .fg-hint { margin: 6px 0 0; color: var(--text-faint); font-size: 12px; }

#followergoalPage .fg-rangerow { display: flex; flex-direction: column; gap: 6px; }
#followergoalPage .fg-rangetop { display: flex; justify-content: space-between; font-size: 12.5px; color: var(--text-muted); font-weight: 600; text-transform: uppercase; letter-spacing: .3px; }
#followergoalPage .fg-rangetop .fg-val { color: var(--text-primary); font-weight: 700; text-transform: none; letter-spacing: 0; }

#followergoalPage .fg-colorwithtoggle { display: flex; align-items: center; gap: 12px; }
#followergoalPage .fg-colorwithtoggle .color-row { flex: 1; }

/* ---------- Aktionen / Hinweisbox ---------- */
#followergoalPage .fg-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; }
#followergoalPage .fg-status { font-size: 13px; color: var(--mono-text); font-weight: 600; }


#followergoalPage #fgStartValue, #followergoalPage #fgEndValue {
  -moz-appearance: textfield;
  color: var(--text-primary) !important;
}
#followergoalPage #fgStartValue::-webkit-outer-spin-button, #followergoalPage #fgStartValue::-webkit-inner-spin-button,
#followergoalPage #fgEndValue::-webkit-outer-spin-button, #followergoalPage #fgEndValue::-webkit-inner-spin-button {
  -webkit-appearance: none; margin: 0;
}
#followergoalPage #fgStartValue.locked {
  background: var(--bg-raised); color: var(--text-muted) !important; font-style: italic; cursor: not-allowed;
}
#followergoalPage #fgStartValue.locked::placeholder { color: var(--text-muted); font-style: italic; opacity: 1; }

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

@media (max-width: 980px) {
  #followergoalPage .fg-layout { flex-direction: column; }
  #followergoalPage .fg-side { position: static; width: 100%; }
  #followergoalPage .fg-grid2 { grid-template-columns: 1fr; }
  #followergoalPage .fg-startend-row.fg-startend-row--3col { grid-template-columns: 1fr; }
  #followergoalPage .fg-typetabs { grid-template-columns: repeat(3, 1fr); }
  #followergoalPage .fg-card-wrapper .tabs { flex-wrap: wrap; }
}

@media (max-width: 560px) {
  #followergoalPage .fg-typetabs { grid-template-columns: repeat(2, 1fr); }
}