/* tables.css — data tables (st.dataframe look) + the app's custom result tables. */

/* ---- Generic dataframe-style table ---- */
.df {
  width: 100%;
  border-collapse: collapse;
  font-size: 1rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}
.df thead th {
  background: var(--secondary-bg);
  text-align: left;
  padding: 0.5rem 0.75rem;
  font-weight: 600;
  position: sticky;
  top: 0;
  border-bottom: 1px solid var(--border);
}
.df tbody td {
  padding: 0.45rem 0.75rem;
  border-bottom: 1px solid var(--border);
}
.df tbody tr:nth-child(even) {
  background: #fafbfc;
}
.df td.num,
.df th.num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
/* CI range shown lighter + on its own line so the bold point estimate stands out */
.df .ci-range { display: block; margin-top: 2px; color: #667085; font-weight: 400; white-space: nowrap; }
.df-scroll {
  max-height: 32rem;
  overflow: auto;
  border-radius: var(--radius);
}
/* ---- st.dataframe-style toolbar (hover top-right: search / download / fullscreen) ---- */
.df-toolbar-wrap {
  position: relative;
}
.df-toolbar {
  position: absolute;
  top: -2.1rem;
  right: 0;
  display: flex;
  align-items: center;
  gap: 0.25rem;
  opacity: 0;
  transition: opacity 0.15s ease;
}
.df-toolbar-wrap:hover .df-toolbar,
.df-toolbar:focus-within {
  opacity: 1;
}
.df-tool-btn {
  border: 1px solid var(--border);
  background: var(--bg);
  color: var(--text-muted);
  border-radius: var(--radius-sm);
  width: 1.9rem;
  height: 1.9rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.df-tool-btn:hover {
  color: var(--primary);
  border-color: var(--primary);
}
.df-tool-btn:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
}
.df-search {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 0.2rem 0.5rem;
  font-size: 1rem;
  font-family: var(--font);
  min-width: 12rem;
}
.df-search:focus-visible {
  outline: none;
  border-color: var(--primary);
}
/* fullscreen overlay */
.df-fullscreen {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: #fff;
  padding: 3rem 1.5rem 1.5rem;
  margin: 0;
  overflow: auto;
}
.df-fullscreen .df-toolbar {
  top: 0.75rem;
  right: 1.5rem;
  opacity: 1;
}
.df-fullscreen .df-scroll {
  max-height: none;
  height: calc(100vh - 5rem);
}

/* st.dataframe-style index column */
.df .df-index {
  background: var(--secondary-bg);
  color: var(--text-muted);
  text-align: center;
  font-weight: 600;
  width: 3rem;
  min-width: 3rem;
}
.df.df-grid td {
  white-space: nowrap;
}

/* ---- Wage estimation table (custom, from source .wage-est-table) ---- */
.wage-est-table {
  width: 100%;
  border-collapse: collapse;
  margin: 0.5rem 0 1rem;
  font-size: 1rem;
}
.wage-est-table th,
.wage-est-table td {
  border: 1px solid #ddd;
  padding: 0.55rem 0.8rem;
  text-align: center;
}
.wage-est-table th {
  background: var(--secondary-bg);
  font-weight: 600;
}
.wage-est-table tr:nth-child(even) td {
  background: #f0f0f0;
}
.wage-est-table .label-col {
  text-align: left;
  font-weight: 600;
}
.wage-est-avg-row td {
  font-weight: 700;
  background: #eaf2fb !important;
}
.wage-val {
  color: var(--blue);
  font-weight: 600;
}
.wage-ci {
  color: var(--text-muted);
  font-size: max(1rem, 0.85em);
}

/* ---- Wage gap comparison table ---- */
.wage-gap-table {
  width: 100%;
  border-collapse: collapse;
  margin: 0.5rem 0 1rem;
  font-size: 1rem;
}
.wage-gap-table th,
.wage-gap-table td {
  border: 1px solid #ddd;
  padding: 0.5rem 0.75rem;
  text-align: center;
}
.wage-gap-table th {
  background: var(--secondary-bg);
}
.gap-pos {
  color: #1a7f37;
  font-weight: 600;
}
.gap-neg {
  color: var(--red);
  font-weight: 600;
}

/* ---- Profile summary grid (custom CSS grid from source) ---- */
.profile-grid {
  display: grid;
  grid-template-columns: 0.9fr 1.4fr 1fr;
  gap: 0.4rem 1.5rem;
  padding: 0.5rem 0;
}
@media (max-width: 800px) {
  .profile-grid {
    grid-template-columns: 1fr;
  }
}
.profile-item {
  font-size: 1rem;
}
.profile-item b {
  color: var(--text);
}
.profile-item .val {
  color: var(--blue);
}

/* ---- Metric card ---- */
.metric {
  padding: 0.5rem 0;
}
.metric .metric-label {
  font-size: 1rem;
  color: var(--text-muted);
}
.metric .metric-value {
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--text);
}

/* ---- 3-column metric row (wage estimation + comparison, Streamlit st.metric look) ---- */
.metrics-3 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.5rem;
  margin: 0.5rem 0 1rem;
}
@media (max-width: 700px) {
  .metrics-3 {
    grid-template-columns: 1fr;
  }
}
.metric-block .metric-name {
  font-size: 1rem;
  color: var(--text);
  margin-bottom: 0.15rem;
}
.metric-block .metric-num {
  font-size: 1.85rem;
  font-weight: 700;
  color: var(--purple);
  line-height: 1.15;
}
.metric-block .metric-ci {
  font-size: 1rem;
  color: var(--text-muted);
  margin-top: 0.1rem;
}
.metric-block .metric-num.gap-pos {
  color: #1a7f37;
}
.metric-block .metric-num.gap-neg {
  color: var(--red);
}
.metric-block .metric-name.gap-name {
  font-weight: 700;
}
.note-ceteris {
  margin: 0.25rem 0 0.75rem;
}

/* ---- Matrix-steps panel: active-terms box, code blocks, KaTeX ---- */
.terms-box {
  background: #f8f9fa;
  border: 1px solid #dee2e6;
  border-radius: 4px;
  padding: 10px;
  font-family: var(--font-mono);
  overflow-x: auto;
  white-space: nowrap;
  margin-bottom: 8px;
  font-size: 1rem;
}
.code-block {
  background: #f6f8fa;
  border: 1px solid #e0e0e0;
  border-radius: 4px;
  padding: 8px 10px;
  font-family: var(--font-mono);
  font-size: 1rem; /* Streamlit st.code = 14px */
  color: var(--text);
  overflow-x: auto;
  white-space: pre-wrap;
  word-break: break-word;
  margin: 0 0 0.6rem;
}
/* Inline code (Streamlit markdown `code`): green, Source Code Pro, small (measured:
   #158237, 12px). Used for coefficients / wages / CIs in the breakdowns. */
code {
  font-family: var(--font-mono);
  font-size: 1rem;
  color: #158237;
  background: rgba(38, 39, 48, 0.06);
  padding: 0.12em 0.35em;
  border-radius: 0.25rem;
}
.code-block code {
  background: none;
  padding: 0;
  font-size: inherit;
  color: inherit;
}
.katex-block {
  margin: 0.6rem 0;
  overflow-x: auto;
  overflow-y: hidden;
}

/* ---- Covariance sub-matrix table (blue gradient) ---- */
.cov-table {
  border-collapse: collapse;
  font-size: 1rem;
  font-variant-numeric: tabular-nums;
}
.cov-table th,
.cov-table td {
  border: 1px solid #e0e0e0;
  padding: 0.25rem 0.4rem;
  text-align: right;
  white-space: nowrap;
}
.cov-table th {
  background: var(--secondary-bg);
  position: sticky;
  top: 0;
}