style.css

/* --- Target the Gradio app wrapper for backgrounds --- */
gradio-app,
.gradio-app,
.main,
#app,
[data-testid="app"] {
  background-color: rgb(40,9,109) !important;
  background-image: 
    url('https://huggingface.co/spaces/escp/rx12workshoptemplate/resolve/main/background_top.png'),
    url('https://huggingface.co/spaces/escp/rx12workshoptemplate/resolve/main/background_mid.png') !important;
  background-position: 
    top center,
    0 913px !important;
  background-repeat: 
    no-repeat,
    repeat-y !important;
  background-size:
    100% auto,
    100% auto !important;
  min-height: 100vh !important;
}

/* --- Fallback on html/body --- */
html, body {
  background-color: rgb(40,9,109) !important;
  margin: 0 !important;
  padding: 0 !important;
  min-height: 100vh !important;
}

/* --- Fixed bottom banner using ::after on body --- */
body::after {
  content: '' !important;
  position: fixed !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  height: 130px !important;
  background-image: url('https://huggingface.co/spaces/escp/rx12workshoptemplate/resolve/main/background_bottom.png') !important;
  background-size: 100% 100% !important;
  background-repeat: no-repeat !important;
  background-position: bottom center !important;
  pointer-events: none !important;
  z-index: 9999 !important;
}

/* --- Main container --- */
.gradio-container {
  max-width: 1400px !important;
  width: 94vw !important;
  margin: 0 auto !important;
  padding-top: 220px !important;
  padding-bottom: 150px !important;
  background: transparent !important;
}

/* --- Title in ESCP gold --- */
#escp_title h1 {
  color: rgb(242,198,55) !important;
  font-size: 3rem !important;
  font-weight: 800 !important;
  text-align: center !important;
  margin: 0 0 12px 0 !important;
}

/* --- Subtitle --- */
#escp_title p, #escp_title em {
  color: rgba(255,255,255,0.85) !important;
  text-align: center !important;
}

/* --- Tab bar background --- */
.tabs > .tab-nav,
.tab-nav,
div[role="tablist"],
.svelte-tabs > .tab-nav {
  background: rgba(40,9,109,0.6) !important;
  border-radius: 10px 10px 0 0 !important;
  padding: 4px !important;
}

/* --- ALL tab buttons: force white text --- */
.tabs > .tab-nav button,
.tab-nav button,
div[role="tablist"] button,
button[role="tab"],
.svelte-tabs button,
.tab-nav > button,
.tabs button {
  color: #ffffff !important;
  font-weight: 600 !important;
  border: none !important;
  background: transparent !important;
  padding: 10px 20px !important;
  border-radius: 8px 8px 0 0 !important;
  opacity: 1 !important;
}

/* --- Selected tab: ESCP gold --- */
.tabs > .tab-nav button.selected,
.tab-nav button.selected,
button[role="tab"][aria-selected="true"],
button[role="tab"].selected,
div[role="tablist"] button[aria-selected="true"],
.svelte-tabs button.selected {
  color: rgb(242,198,55) !important;
  background: rgba(255,255,255,0.12) !important;
}

/* --- Unselected tabs: ensure visibility --- */
.tabs > .tab-nav button:not(.selected),
.tab-nav button:not(.selected),
button[role="tab"][aria-selected="false"],
button[role="tab"]:not(.selected),
div[role="tablist"] button:not([aria-selected="true"]) {
  color: #ffffff !important;
  opacity: 1 !important;
}

/* --- White card panels --- */
.gradio-container .gr-block,
.gradio-container .gr-box,
.gradio-container .gr-panel,
.gradio-container .gr-group {
  background: #ffffff !important;
  border-radius: 10px !important;
}

/* --- Tab content area --- */
.tabitem {
  background: rgba(255,255,255,0.95) !important;
  border-radius: 0 0 10px 10px !important;
  padding: 16px !important;
}

/* --- Inputs --- */
.gradio-container input,
.gradio-container textarea,
.gradio-container select {
  background: #ffffff !important;
  border: 1px solid #d1d5db !important;
  border-radius: 8px !important;
}

/* --- Buttons: ESCP purple primary --- */
.gradio-container button:not([role="tab"]) {
  font-weight: 600 !important;
  padding: 10px 16px !important;
  border-radius: 10px !important;
}

button.primary {
  background-color: rgb(40,9,109) !important;
  color: #ffffff !important;
  border: none !important;
}

button.primary:hover {
  background-color: rgb(60,20,140) !important;
}

button.secondary {
  background-color: #ffffff !important;
  color: rgb(40,9,109) !important;
  border: 2px solid rgb(40,9,109) !important;
}

button.secondary:hover {
  background-color: rgb(240,238,250) !important;
}

/* --- Dataframes --- */
[data-testid="dataframe"] {
  background-color: #ffffff !important;
  border-radius: 10px !important;
}

table {
  font-size: 0.85rem !important;
}

/* --- Chatbot (AI Dashboard tab) --- */
.gr-chatbot {
  min-height: 380px !important;
  background-color: #ffffff !important;
  border-radius: 12px !important;
}

.gr-chatbot .message.user {
  background-color: rgb(232,225,250) !important;
  border-radius: 12px !important;
}

.gr-chatbot .message.bot {
  background-color: #f3f4f6 !important;
  border-radius: 12px !important;
}

/* --- Gallery --- */
.gallery {
  background: #ffffff !important;
  border-radius: 10px !important;
}

/* --- Log textbox --- */
textarea {
  font-family: monospace !important;
  font-size: 0.8rem !important;
}

/* --- Markdown headings inside tabs --- */
.tabitem h3 {
  color: rgb(40,9,109) !important;
  font-weight: 700 !important;
}

.tabitem h4 {
  color: #374151 !important;
}

/* --- Examples row (AI Dashboard) --- */
.examples-row button {
  background: rgb(240,238,250) !important;
  color: rgb(40,9,109) !important;
  border: 1px solid rgb(40,9,109) !important;
  border-radius: 8px !important;
  font-size: 0.85rem !important;
}

.examples-row button:hover {
  background: rgb(232,225,250) !important;
}

/* --- Header / footer: transparent over banner --- */
header, header *,
footer, footer * {
  background: transparent !important;
  box-shadow: none !important;
}

footer a, footer button,
header a, header button {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

#footer, #footer *,
[class*="footer"], [class*="footer"] *,
[class*="chip"], [class*="pill"], [class*="chip"] *, [class*="pill"] * {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

[data-testid*="api"], [data-testid*="settings"],
[id*="api"], [id*="settings"],
[class*="api"], [class*="settings"],
[class*="bottom"], [class*="toolbar"], [class*="controls"] {
  background: transparent !important;
  box-shadow: none !important;
}

[data-testid*="api"] *, [data-testid*="settings"] *,
[id*="api"] *, [id*="settings"] *,
[class*="api"] *, [class*="settings"] * {
  background: transparent !important;
  box-shadow: none !important;
}

section footer {
  background: transparent !important;
}

section footer button,
section footer a {
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
  color: white !important;
}

section footer button:hover,
section footer button:focus,
section footer a:hover,
section footer a:focus {
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
}

section footer button,
section footer button * {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  filter: none !important;
}

section footer button::before,
section footer button::after {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  filter: none !important;
}

section footer a,
section footer a * {
  background: transparent !important;
  background-color: transparent !important;
  box-shadow: none !important;
}

.gradio-container footer button,
.gradio-container footer button *,
.gradio-container .footer button,
.gradio-container .footer button * {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}

.gradio-container footer button::before,
.gradio-container footer button::after,
.gradio-container .footer button::before,
.gradio-container .footer button::after {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}