/* Planet Gel-O Portal TEMP Theme (extracted from templates/temp_member_portal.html)
   Scope: Streamlit /portal visual alignment without changing data logic
*/
:root {
  --planet-green: #539038;
  --planet-blue: #5387B7;
  --bg-dark: #0f1419; /* matches masked edge color used on research page */
  --text-light: #ffffff;
  --text-muted: rgba(255,255,255,0.7);
}

/* Base App background */
html, body, .stApp {
  background: #000000 !important;
  color: var(--text-light) !important;
}

/* Remove Streamlit default header space to eliminate white band */
[data-testid="stHeader"] {
  height: 0 !important;
  min-height: 0 !important;
  background: transparent !important;
}
[data-testid="stHeader"] * { display: none !important; }

/* Reduce top padding on Streamlit block container to bring header closer */
.block-container {
  padding-top: 0 !important;
  margin-top: -6px !important; /* nudge up to cover any residual gap */
}

/* Sidebar styling */
[data-testid="stSidebar"] {
  background: rgba(255,255,255,0.03) !important;
  border-right: 1px solid rgba(255,255,255,0.08) !important;
}

/* Hero header */
.header-container {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.portal-header {
  position: relative;
  padding: 3rem 2rem;
  margin-bottom: 1.5rem;
  min-height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
  background:
    linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 35%, rgba(0,0,0,0) 70%),
    url('/static/space_earth_bg.jpg') 57% center/110% no-repeat;
}

/* Left-edge mask to hide faint sliver on some viewports */
.portal-header::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 8px;
  background: var(--bg-dark);
  z-index: 2;
}

.portal-header-content {
  position: relative;
  z-index: 3;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.portal-logo {
  height: 128px;
  width: auto;
  position: absolute;
  left: 8px;
  top: 50%;
  transform: translateY(-50%);
  filter: drop-shadow(0 2px 8px rgba(0,0,0,0.6));
}

.portal-text { text-align: center; }
.portal-text h1 { margin-bottom: 0.25rem; }
.portal-text h4 { margin: 0; }
.portal-text p { margin: 0.35rem 0 0; color: var(--text-muted); }

/* Logout button anchored right */
.portal-logout {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: #041016;
  background: linear-gradient(135deg, #7dd3fc, #a78bfa);
  padding: 10px 14px;
  border-radius: 999px;
  font-weight: 800;
  text-decoration: none;
  border: none;
  box-shadow: 0 10px 30px rgba(0,0,0,0.35);
}
.portal-logout:hover { filter: brightness(1.05); }

.portal-profile {
  position: absolute;
  right: 120px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
}


/* Section & card aesthetics for Streamlit content */
.section-header { margin: 1.5rem 0 0.75rem; }

/* Try to approximate cards by styling Streamlit containers and headers */
.css-1r6slb0, .css-12oz5g7, .stMarkdown { /* fallbacks across versions */
  color: var(--text-light) !important;
}

/* st.metric tuning */
[data-testid="stMetricValue"] {
  color: var(--planet-green) !important;
  font-weight: 700 !important;
}

[data-testid="stMetricLabel"] {
  color: var(--text-muted) !important;
}

/* Tabs styling (best-effort across Streamlit versions) */
.stTabs [role="tablist"] {
  background: rgba(255,255,255,0.08);
  border-radius: 10px;
  padding: 6px;
  margin-bottom: 1rem;
}
.stTabs button[role="tab"] {
  color: #ffffff;
  border: none;
  border-radius: 8px;
  margin: 0 4px;
}
.stTabs button[role="tab"][aria-selected="true"] {
  background: var(--planet-green);
}

/* Buttons created via st.button */
.stButton > button {
  background: var(--planet-green) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 8px !important;
}
.stButton > button:hover {
  background: var(--planet-blue) !important;
}

/* Info/success boxes tinting */
.stAlert { border-left: 4px solid var(--planet-blue); }
.stSuccess { border-left: 4px solid var(--planet-green); }

/* Intelligence feed simple cards (when used via markdown) */
.metric-box {
  background: rgba(255,255,255,0.05);
  border-radius: 10px;
  padding: 1rem;
  border: 1px solid rgba(255,255,255,0.1);
}

/* Risk indicator pills (used inside markdown blocks) */
.risk-indicator { padding: 0.35rem 0.75rem; border-radius: 16px; font-weight: 700; }
.risk-low { background: #28a745; color: #fff; }
.risk-medium { background: #ffc107; color: #000; }
.risk-high { background: #dc3545; color: #fff; }