style.css

/* CS1 Group 14 — Job Risk Analyzer
   Cream + navy + coral light theme */

@import url('https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700;800&family=Geist+Mono:wght@400;500;600&display=swap');

:root {
  --bg: #f7f3ec;
  --bg-1: #f1ebe0;
  --bg-2: #ebe3d4;
  --surface: #fdfaf3;
  --surface-elev: #ffffff;
  --border: #d9cfb9;
  --border-soft: #e6dcc7;
  --border-hi: #c4b89f;
  --ink: #1a2238;
  --ink-soft: #4a5475;
  --ink-mute: #8a9099;
  --coral: #e85a4f;
  --coral-glow: rgba(232, 90, 79, 0.15);
  --coral-soft: rgba(232, 90, 79, 0.08);
  --teal: #2a9d8f;
  --teal-glow: rgba(42, 157, 143, 0.18);
  --amber: #e9a23b;
  --plum: #7d4e8a;
  --red: #c53030;
  --green: #2f855a;
  --font-display: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'Geist Mono', 'SF Mono', Menlo, monospace;
}

html, body,
gradio-app, .gradio-app,
.main, #app,
[data-testid="app"],
.gradio-container,
.contain, main {
  background: var(--bg) !important;
  background-color: var(--bg) !important;
  color: var(--ink) !important;
}

gradio-app, .gradio-app, [data-testid="app"] {
  background-image:
    radial-gradient(ellipse 60% 40% at 15% 0%, rgba(232, 90, 79, 0.08), transparent 60%),
    radial-gradient(ellipse 50% 35% at 85% 10%, rgba(42, 157, 143, 0.06), transparent 60%) !important;
  background-attachment: fixed !important;
  background-repeat: no-repeat !important;
  min-height: 100vh !important;
}

html, body {
  margin: 0 !important;
  padding: 0 !important;
  font-family: var(--font-display) !important;
  -webkit-font-smoothing: antialiased !important;
  letter-spacing: -0.011em !important;
}

body::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image: radial-gradient(circle, rgba(26, 34, 56, 0.045) 1px, transparent 1px);
  background-size: 22px 22px;
  pointer-events: none;
  z-index: 0;
}

.gradio-container {
  max-width: 1240px !important;
  width: 92vw !important;
  margin: 0 auto !important;
  padding-top: 56px !important;
  padding-bottom: 96px !important;
  position: relative !important;
  z-index: 1 !important;
}

#escp_title {
  text-align: left !important;
  margin-bottom: 40px !important;
  padding-bottom: 28px !important;
  border-bottom: 1px solid var(--border) !important;
  position: relative !important;
}

#escp_title::before {
  content: 'CS1.GROUP_14 / v1.2.0' !important;
  display: block !important;
  font-family: var(--font-mono) !important;
  font-size: 11px !important;
  color: var(--coral) !important;
  letter-spacing: 0.05em !important;
  margin-bottom: 16px !important;
  text-transform: uppercase !important;
  font-weight: 600 !important;
}

#escp_title h1 {
  font-size: 2.75rem !important;
  font-weight: 700 !important;
  letter-spacing: -0.04em !important;
  text-align: left !important;
  margin: 0 0 12px 0 !important;
  line-height: 1.05 !important;
  color: var(--ink) !important;
}

#escp_title p {
  color: var(--ink-soft) !important;
  text-align: left !important;
  font-size: 1rem !important;
  margin: 0 !important;
}

#escp_title::after {
  content: '' !important;
  position: absolute !important;
  top: 22px !important;
  right: 0 !important;
  width: 8px !important;
  height: 8px !important;
  border-radius: 50% !important;
  background: var(--teal) !important;
  box-shadow: 0 0 0 4px var(--teal-glow), 0 0 12px var(--teal) !important;
  animation: pulse-dot 2s ease-in-out infinite !important;
}

@keyframes pulse-dot {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

.tab-nav,
div[role="tablist"] {
  background: var(--bg-1) !important;
  border: 1px solid var(--border) !important;
  border-radius: 10px !important;
  padding: 4px !important;
  margin-bottom: 24px !important;
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 2px !important;
  width: fit-content !important;
  max-width: 100% !important;
}

.tab-nav button,
button[role="tab"] {
  display: inline-flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  color: var(--ink-soft) !important;
  font-weight: 500 !important;
  font-size: 0.875rem !important;
  border: none !important;
  background: transparent !important;
  padding: 8px 18px !important;
  border-radius: 6px !important;
  border-bottom: none !important;
  white-space: nowrap !important;
}

.tab-nav button:hover,
button[role="tab"]:hover {
  color: var(--ink) !important;
  background: var(--bg-2) !important;
}

.tab-nav button.selected,
button[role="tab"][aria-selected="true"],
button[role="tab"].selected {
  color: #ffffff !important;
  background: var(--ink) !important;
  font-weight: 600 !important;
  box-shadow: 0 1px 3px rgba(26, 34, 56, 0.25) !important;
}

.tabitem {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  box-shadow: none !important;
}

.gr-block, .gr-box, .gr-panel, .gr-group,
.block, .form, .panel {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: 12px !important;
}

label, .gr-label {
  color: var(--coral) !important;
  font-family: var(--font-mono) !important;
  font-weight: 600 !important;
  font-size: 0.7rem !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
}

input, textarea, select {
  background: var(--surface-elev) !important;
  border: 1px solid var(--border) !important;
  border-radius: 8px !important;
  color: var(--ink) !important;
  font-family: var(--font-display) !important;
  font-size: 0.95rem !important;
  padding: 11px 14px !important;
  caret-color: var(--coral) !important;
}

input:focus, textarea:focus, select:focus {
  border-color: var(--coral) !important;
  box-shadow: 0 0 0 3px var(--coral-glow) !important;
  outline: none !important;
}

input::placeholder, textarea::placeholder {
  color: var(--ink-mute) !important;
}

button:not([role="tab"]) {
  font-family: var(--font-display) !important;
  font-weight: 600 !important;
  padding: 11px 20px !important;
  border-radius: 8px !important;
  font-size: 0.9rem !important;
}

button.primary {
  background: var(--coral) !important;
  color: #ffffff !important;
  border: 1px solid var(--coral) !important;
  box-shadow: 0 2px 6px var(--coral-glow) !important;
}

button.primary:hover {
  background: #d94a3f !important;
  transform: translateY(-1px) !important;
}

button.secondary {
  background: var(--surface-elev) !important;
  color: var(--ink) !important;
  border: 1px solid var(--border) !important;
}

h1, h2 {
  color: var(--ink) !important;
  font-weight: 700 !important;
}

h3 {
  color: var(--ink) !important;
  font-weight: 600 !important;
  font-size: 1.05rem !important;
  margin-top: 28px !important;
  margin-bottom: 12px !important;
  padding-bottom: 8px !important;
  border-bottom: 1px solid var(--border) !important;
}

p, li {
  color: var(--ink-soft) !important;
  line-height: 1.65 !important;
  font-size: 0.95rem !important;
}

strong {
  color: var(--ink) !important;
  font-weight: 700 !important;
}

code {
  background: var(--bg-1) !important;
  color: var(--plum) !important;
  padding: 2px 6px !important;
  border-radius: 4px !important;
  font-size: 0.85em !important;
  font-family: var(--font-mono) !important;
  border: 1px solid var(--border-soft) !important;
}

table {
  font-size: 0.85rem !important;
  color: var(--ink) !important;
  background: var(--surface) !important;
}

table thead th {
  background: var(--bg-1) !important;
  color: var(--ink) !important;
  font-family: var(--font-mono) !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  font-size: 0.7rem !important;
  letter-spacing: 0.08em !important;
  border-bottom: 2px solid var(--ink) !important;
  padding: 12px 14px !important;
}

table tbody td {
  border-bottom: 1px solid var(--border-soft) !important;
  color: var(--ink-soft) !important;
  padding: 11px 14px !important;
}

table tbody tr:hover td {
  background: var(--bg-1) !important;
}

.chatbot, .gr-chatbot {
  background: var(--bg-1) !important;
  border: 1px solid var(--border) !important;
  border-radius: 12px !important;
}

.chatbot .message,
.gr-chatbot .message {
  font-size: 0.92rem !important;
  line-height: 1.6 !important;
  color: var(--ink) !important;
}

.chatbot .message.user,
.gr-chatbot .message.user {
  background: var(--ink) !important;
  color: #ffffff !important;
}

.chatbot .message.user *,
.gr-chatbot .message.user * {
  color: #ffffff !important;
}

.chatbot .message.bot,
.gr-chatbot .message.bot {
  background: var(--surface-elev) !important;
  color: var(--ink) !important;
  border-left: 3px solid var(--coral) !important;
}

.examples-row button {
  background: var(--surface-elev) !important;
  color: var(--ink) !important;
  border: 1px solid var(--border) !important;
  border-radius: 999px !important;
  font-size: 0.85rem !important;
  font-weight: 500 !important;
  text-transform: none !important;
  letter-spacing: -0.005em !important;
  padding: 7px 14px !important;
}

.examples-row button:hover {
  background: var(--coral-soft) !important;
  color: var(--coral) !important;
  border-color: var(--coral) !important;
}

.js-plotly-plot {
  border-radius: 12px !important;
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
}

[type="number"] {
  font-family: var(--font-mono) !important;
  font-size: 1.75rem !important;
  font-weight: 700 !important;
  color: var(--coral) !important;
  text-align: center !important;
}

footer, footer * {
  background: transparent !important;
  color: var(--ink-mute) !important;
  font-family: var(--font-mono) !important;
  font-size: 0.75rem !important;
}

footer a:hover {
  color: var(--coral) !important;
}

::selection {
  background: var(--coral-glow);
  color: var(--ink);
}

/* =========================================================
   FIX: lock plot heights (Gradio 6 has runaway plots)
   ========================================================= */

/* Target every possible plot container with a hard height lock */
.js-plotly-plot,
.plot-container,
.plotly,
.plotly-graph-div,
[data-testid="plot"],
.gradio-container .gr-plot,
.gradio-container [class*="plot"] {
  height: 480px !important;
  max-height: 480px !important;
  min-height: 320px !important;
}

/* Specifically the inline-style div Plotly creates */
.js-plotly-plot > div,
.plotly > div,
.plot-container > div {
  height: 100% !important;
  max-height: 480px !important;
}

/* Some Gradio 6 plot wrappers use 'svelte-...' classes */
div[class*="plot"][class*="svelte"] {
  height: 480px !important;
  max-height: 480px !important;
}

/* AI Dashboard chart specifically — make sure visualization slot has dimensions */
#component-ai_chart,
[id*="ai_chart"] {
  min-height: 400px !important;
  height: 480px !important;
}