style.css

/* ============================
   READABILITY / THEME VARIABLES
   ============================ */
:root{
  --bg-purple: rgb(40,9,109);
  --escp-gold: rgb(242,198,55);
  --text-dark: #0f172a;
  --text-muted: #475569;

  /* How much to darken the wallpaper */
  --overlay-strength: 0.45;

  /* Panels */
  --panel-bg: rgba(255,255,255,0.96);
  --panel-radius: 14px;

  /* Shadows */
  --shadow-soft: 0 10px 30px rgba(0,0,0,0.22);
  --shadow-card: 0 8px 22px rgba(0,0,0,0.18);

  /* Readable text on images */
  --title-shadow: 0 2px 10px rgba(0,0,0,0.55);
  --text-shadow: 0 1px 6px rgba(0,0,0,0.45);
}

/* ============================
   WALLPAPER + DARK OVERLAY
   ============================ */
html, body {
  margin: 0 !important;
  padding: 0 !important;
  min-height: 100vh !important;

  background-color: var(--bg-purple) !important;
  background-image:
    url("https://huggingface.co/spaces/ecaragnano/ALARAAPPREDONE/resolve/main/background_top.png"),
    url("https://huggingface.co/spaces/ecaragnano/ALARAAPPREDONE/resolve/main/background_mid.png") !important;
  background-position: top center, top center !important;
  background-repeat: no-repeat, repeat-y !important;
  background-size: 100% auto, 100% auto !important;
}

/* Darken wallpaper to improve contrast everywhere */
body::before{
  content:"" !important;
  position: fixed !important;
  inset: 0 !important;
  background: rgba(0,0,0,var(--overlay-strength)) !important;
  pointer-events: none !important;
  z-index: 0 !important;
}

/* Bottom banner (kept) */
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/ecaragnano/ALARAAPPREDONE/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: 2 !important;
}

/* ============================
   GRADIO ROOT LAYERING
   ============================ */
.gradio-container{
  position: relative !important;
  z-index: 1 !important;

  max-width: 1400px !important;
  width: 94vw !important;
  margin: 0 auto !important;

  /* Less top padding; we’ll create a header panel */
  padding-top: 36px !important;
  padding-bottom: 150px !important;

  background: transparent !important;
}

/* ============================
   HEADER READABILITY BLOCK
   Wrap the top content in a readable “glass” band
   ============================ */

/* Give the entire top-of-app a panel feeling */
#user_greeting,
#escp_title{
  background: rgba(10, 8, 28, 0.55) !important; /* dark glass */
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  border: 1px solid rgba(255,255,255,0.14) !important;
  border-radius: var(--panel-radius) !important;
  box-shadow: var(--shadow-soft) !important;

  padding: 16px 18px !important;
  margin: 12px 0 !important;
}

/* Greeting text: enforce strong contrast */
#user_greeting,
#user_greeting *{
  color: #fff !important;
  text-shadow: var(--text-shadow) !important;
}

/* ============================
   TITLE + SUBTITLE
   ============================ */
#escp_title h1 {
  color: var(--escp-gold) !important;
  font-size: clamp(2.1rem, 3.2vw, 3.2rem) !important;
  font-weight: 900 !important;
  text-align: center !important;
  margin: 0 0 10px 0 !important;

  text-shadow: var(--title-shadow) !important;
  letter-spacing: 0.2px !important;
}

#escp_title p,
#escp_title em{
  color: rgba(255,255,255,0.92) !important;
  text-align: center !important;
  text-shadow: var(--text-shadow) !important;
}

/* ============================
   TABS – clearer contrast
   ============================ */
.tabs > .tab-nav,
.tab-nav,
div[role="tablist"],
.svelte-tabs > .tab-nav {
  background: rgba(10, 8, 28, 0.62) !important;
  backdrop-filter: blur(6px) !important;
  -webkit-backdrop-filter: blur(6px) !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  border-radius: 12px !important;
  padding: 6px !important;
  box-shadow: var(--shadow-soft) !important;
}

.tabs > .tab-nav button,
.tab-nav button,
div[role="tablist"] button,
button[role="tab"] {
  color: rgba(255,255,255,0.92) !important;
  font-weight: 700 !important;
  background: transparent !important;
  border: none !important;
  padding: 10px 18px !important;
  border-radius: 10px !important;
  opacity: 1 !important;
  text-shadow: var(--text-shadow) !important;
}

.tabs > .tab-nav button.selected,
button[role="tab"][aria-selected="true"],
div[role="tablist"] button[aria-selected="true"]{
  color: var(--escp-gold) !important;
  background: rgba(255,255,255,0.12) !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.16) !important;
}

/* ============================
   PANELS / CARDS – crisp
   ============================ */
.gradio-container .gr-block,
.gradio-container .gr-box,
.gradio-container .gr-panel,
.gradio-container .gr-group,
.tabitem{
  background: var(--panel-bg) !important;
  border-radius: var(--panel-radius) !important;
  box-shadow: var(--shadow-card) !important;
  border: 1px solid rgba(15,23,42,0.08) !important;
}

/* Inside tabs: readable spacing */
.tabitem{
  padding: 18px !important;
}

/* Headings inside tabs: strong and dark */
.tabitem h2, .tabitem h3{
  color: var(--bg-purple) !important;
  font-weight: 900 !important;
  letter-spacing: 0.2px !important;
}
.tabitem h4{
  color: var(--text-dark) !important;
  font-weight: 800 !important;
}

/* ============================
   FORMS / INPUTS – clearer
   ============================ */
.gradio-container label,
.gradio-container .label,
.gradio-container .wrap label{
  color: var(--text-dark) !important;
  font-weight: 700 !important;
}

.gradio-container input,
.gradio-container textarea,
.gradio-container select{
  background: #ffffff !important;
  border: 1px solid rgba(15,23,42,0.18) !important;
  border-radius: 10px !important;
  color: var(--text-dark) !important;
}

.gradio-container input::placeholder,
.gradio-container textarea::placeholder{
  color: rgba(15,23,42,0.45) !important;
}

/* ============================
   BUTTONS – higher contrast
   ============================ */
button.primary {
  background-color: var(--bg-purple) !important;
  color: #ffffff !important;
  border: none !important;
  box-shadow: 0 8px 18px rgba(40,9,109,0.35) !important;
}

button.primary:hover {
  filter: brightness(1.08) !important;
}

button.secondary {
  background-color: #ffffff !important;
  color: var(--bg-purple) !important;
  border: 2px solid var(--bg-purple) !important;
}

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

/* ============================
   CHATBOT / TABLES
   ============================ */
.gr-chatbot,
[data-testid="dataframe"],
.gallery {
  background: #ffffff !important;
  border-radius: var(--panel-radius) !important;
}

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

/* ============================
   FOOTER/HEADER TRANSPARENT
   (keep your cleanup, but don't kill text)
   ============================ */
header, footer {
  background: transparent !important;
  box-shadow: none !important;
}