# css_base_layout.py - Base variables, layout, typography and controls
"""CSS chunk: variables, base layout, title, typography, controls (no tab overrides)."""

CSS_BASE_LAYOUT = """
:root{
  /* Slightly lighter dark palette + softer white text */
  --bg:#141a22;
  --panel:#1a2333;
  --panel-soft:#171f2b;
  --line:#273142;
  --text:#edf2f7;
  --muted:#cbd5e1;
  --acc:#7dd3fc;
  --acc2:#60a5fa;
  --shadow:0 8px 24px rgba(0,0,0,.25);
}

/* Lock appearance regardless of OS/browser light/dark */
html{ color-scheme: dark !important; }
html[data-theme="light"],
body[data-theme="light"],
.gradio-container[data-theme="light"],
html[data-theme="dark"],
body[data-theme="dark"],
.gradio-container[data-theme="dark"]{
  --bg:#141a22; --panel:#1a2333; --panel-soft:#171f2b; --line:#273142;
  --text:#edf2f7; --muted:#cbd5e1; --acc:#7dd3fc; --acc2:#60a5fa;
}

/* Base layout */
html,body{ background:var(--bg)!important; margin:0!important; padding:0!important; }
.gradio-container{
  background:var(--bg)!important; color:var(--text)!important;
  padding:0 8px!important; margin:0 auto!important; max-width:100%!important;
  width:100%!important; box-sizing:border-box!important;
}
.gradio-container, html, body{ height:auto!important; min-height:0!important; overflow-y:auto!important; }
.gradio-container .tabitem, .gradio-container .block, .gradio-container .panel, .gradio-container .tabs{ min-height:0!important; }
.gradio-container .block,.gradio-container .panel,.gradio-container .tabs,.gradio-container .tabitem,
.gradio-container .tab-container,.gradio-container .wrap,.gradio-container .container{
  background:var(--bg)!important; padding:0!important; margin:0 auto!important;
}
.gradio-container > *:first-child{ margin-top:0!important; padding-top:0!important; }

/* Title */
#main-title{ margin:0!important; padding:2px 0!important; }
#main-title h1{
  font-size:30px!important; font-weight:800!important; margin:0!important;
  color:var(--text)!important; letter-spacing:.2px; line-height:1.1!important;
}

/* Grid gaps */
.gradio-container .gr-row,.gradio-container .grid{ gap:4px!important; }

/* Typography and links */
.gradio-container,
.gradio-container *:not(i.fa):not(.fa):not(.fa-solid):not(.fa-regular):not(.fa-brands){
  font-family:inherit!important;
}
.gradio-container a{
  color:var(--acc2)!important; text-decoration:underline; text-underline-offset:2px;
}
.gradio-container a:hover{ color:var(--acc)!important; text-decoration-thickness:2px; }

/* Prose containers */
.gradio-container .prose, .gradio-container .markdown, .gradio-container .md{
  background:var(--bg)!important; color:var(--text)!important;
}

/* Form controls */
.gradio-container input, .gradio-container textarea, .gradio-container select{
  background:var(--panel)!important; color:var(--text)!important;
  border:1px solid var(--line)!important; border-radius:10px!important;
}
.gradio-container input::placeholder, .gradio-container textarea::placeholder{
  color:rgba(237,242,247,.7)!important;
}
.gradio-container select option{ background:var(--panel)!important; color:var(--text)!important; }
"""