/* ==============================================
   ralf.css — RALF Study Data Explorer
   ============================================== */

/* --- 1. CSS Variables ----------------------- */
:root {
  --ralf-black:    #000000;
  --ralf-hellblau: #9DC3CF;
  --ralf-gruen:    #74B594;
  --ralf-gelb:     #F6E49C;
  --ralf-lachs:    #E3AF94;
  --ralf-rosa:     #DB9386;
  --ralf-lila:     #B8A5BA;
}

/* --- 2. Layout & Spacing fixes -------------- */
[id$='-question_cards'] > div,
#qual-tk_content > div {
  padding-bottom: 80px;
}

.tab-pane,
.tab-pane > div {
  padding-bottom: 80px !important;
}

/* --- 3. Footer ------------------------------ */
.ralf-footer {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 1000;
  background: white;
  border-top: 1px solid #e0e0e0;
  padding: 10px 24px;
}

.ralf-footer-inner {
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  max-width: 800px;
  margin: 0 auto;
}

.img-link {
    transition: all 0.2s ease
}

.img-link:hover {
    transform: rotate(2deg) scale(1.1) translateY(-2px);    
}

/* --- 3b. Demografische Übersicht: weiße Kacheln auf farbiger Karte --- */
/* Die Kartenfarbe wird per JS zufällig gesetzt (siehe main.js). Damit Plot UND
   Tabelle auf jeder der 6 Markenfarben lesbar bleiben, bekommen beide dieselbe
   weiße, leicht abgerundete Kachel. Die Kartenfarbe wirkt dann nur als Rahmen. */
/* Plot: runde weiße Fläche; KEIN overflow/padding, sonst werden die
   Achsenbeschriftungen unten abgeschnitten. */
#demo_overview_content .shiny-plot-output {
  background: #ffffff;
  border-radius: 8px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
}

/* Tabelle: die Output-Hülle hat display:contents (bslib-Fill) und erzeugt
   KEINE Box -> Styling muss direkt auf die <table>. Weißer Grund + Radius
   bilden die runde Kachel; Zellen transparent, damit ihre eckigen
   Hintergründe die Ecken nicht übermalen; Streifen neu auf gerade Zeilen;
   die Eck-Zellen der letzten Zeile zusätzlich runden (falls sie gestreift
   ist). border-collapse:separate ist Voraussetzung für runde Tabellenecken. */
#demo_overview_content table.shiny-table {
  border-collapse: separate;
  border-spacing: 0;
  background: #ffffff;
  border-radius: 8px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
  overflow: hidden;
  margin-bottom: 0;
}
#demo_overview_content table.shiny-table > :not(caption) > * > * {
  background-color: transparent;
  box-shadow: none;
}
#demo_overview_content table.shiny-table tbody tr:nth-of-type(even) > * {
  background-color: #f5f6f7;
}
#demo_overview_content table.shiny-table tbody tr:last-child td:first-child {
  border-bottom-left-radius: 8px;
}
#demo_overview_content table.shiny-table tbody tr:last-child td:last-child {
  border-bottom-right-radius: 8px;
}

/* --- 3c. Frage-Karten: klar als klickbar erkennbar --- */
/* Die Zufallsfarbe wird per JS gesetzt (sticky, soll sofort snappen). Das
   Anheben beim Hover signalisiert "klickbar wie ein Button". Trick: transition
   pro Eigenschaft -> Farbe 0s (instant, wie bisher), Lift 0.2s (weich). Die
   Inline-Transition in main.js (attachStickyHover) setzt dasselbe, damit der
   Lift auch beim Verlassen weich zurückfährt, während die Farbe sticky bleibt. */
.question-card {
  transition: background-color 0s, border-color 0s,
              box-shadow 0.2s ease, transform 0.2s ease;
}
.question-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

/* --- 4. Welcome Page ------------------------ */
.welcome-box {
  /* placeholder — add styles here when needed */
}

/* --- 5. Buttons ----------------------------- */
.ralf-btn {
  transition: background-color 0.2s ease,
              border-color 0.2s ease;
}

/* Einstellungen-Button: schwarzer Rand + schwarze Schrift als Ruhezustand.
   Per CSS (nicht inline), damit der ralf-btn-Hover-Reset in main.js
   (setzt color='' / borderColor='' beim Verlassen) auf Schwarz zurückfällt
   statt auf den Bootstrap-Default. Der Zufallsfarben-Hover kommt von der
   Klasse .ralf-btn (attachResetHover). */
.btn.ralf-settings {
  border-color: #000;
  color: #000;
}

.navbar-nav > .nav-item > .nav-link {
    transition: none;
    border-radius: 3px;
}