/* Finance agents dashboard styles. Built on the Greenhouse Design System (public/greenhouse/),
   which supplies the tokens (--gh-*), fonts and component classes (.gh-btn, .gh-tab,
   .gh-badge, .gh-logo). Author against the semantic tokens, not raw hex.
   Shell (header, login, sync panel, tabs) matches the OTIF dashboard. */
@import url('/public/greenhouse/styles.css');
@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@300;500;600;700&display=swap');

* { box-sizing: border-box; }

body { margin: 0; }

.num, .mono { font-family: var(--gh-font-mono); font-variant-numeric: tabular-nums; }
.muted { color: var(--gh-text-secondary); }

.card {
  background: var(--gh-surface-card);
  border: var(--gh-border-hairline) solid var(--gh-border-subtle);
  border-radius: var(--gh-radius-md);
  padding: var(--gh-space-6);
}

.card h3 {
  font-size: var(--gh-text-heading-m);
  font-weight: var(--gh-weight-medium);
  margin-bottom: var(--gh-space-1);
}

/* Login page */
.login-screen {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--gh-space-6);
}

.login-card {
  width: 380px;
  max-width: 100%;
  padding: var(--gh-space-10) var(--gh-space-8);
  text-align: center;
}
.login-card .gh-logo { margin: 0 auto var(--gh-space-8); }
.login-card h1 {
  font-size: var(--gh-text-display-s);
  font-weight: var(--gh-weight-light);
  line-height: var(--gh-leading-heading);
  margin-bottom: var(--gh-space-2);
}
.login-card p.subtitle { color: var(--gh-text-secondary); margin: 0 0 var(--gh-space-8); }

.error-banner {
  background: var(--gh-status-error-surface);
  border: var(--gh-border-hairline) solid var(--gh-status-error);
  color: var(--gh-status-error);
  border-radius: var(--gh-radius-sm);
  padding: var(--gh-space-3) var(--gh-space-4);
  margin-bottom: var(--gh-space-4);
  font-size: var(--gh-text-body-s);
}

/* App shell: the design system's nav pattern (sticky, cream, hairline bottom border). */
.app-header {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gh-space-4);
  flex-wrap: wrap;
  padding: var(--gh-space-4) var(--gh-space-8);
  background: var(--gh-surface-page);
  border-bottom: var(--gh-border-hairline) solid var(--gh-border-subtle);
}

.app-header .brand { display: flex; align-items: center; gap: var(--gh-space-4); }
.app-header .brand-home { display: flex; border-radius: var(--gh-radius-xs); }
.app-header .brand-home .gh-logo { transition: background-color var(--gh-duration-fast) var(--gh-ease-out); }
.app-header .brand-home:hover .gh-logo { --logo-fill: var(--gh-green-900); }
.app-header .brand-divider { width: 1px; align-self: stretch; background: var(--gh-border-subtle); }
.app-header h1 {
  font-size: var(--gh-text-heading-m);
  font-weight: var(--gh-weight-medium);
  line-height: 1.2;
  letter-spacing: var(--gh-tracking-heading);
}
.app-header .meta { font-size: var(--gh-text-caption); color: var(--gh-text-secondary); }
.app-header .user { display: flex; align-items: center; gap: var(--gh-space-3); font-size: var(--gh-text-body-s); }
.app-header .user-email { color: var(--gh-text-secondary); margin-right: var(--gh-space-2); }

main { padding: var(--gh-space-8); max-width: var(--gh-page-max); margin: 0 auto; }

/* Tables (run log and the AR lists) */
.table-scroll { overflow-x: auto; }
.sync-panel table, .data-table { width: 100%; border-collapse: collapse; font-size: var(--gh-text-body-s); }
.sync-panel th, .sync-panel td, .data-table th, .data-table td {
  text-align: left;
  vertical-align: top;
  padding: var(--gh-space-2) var(--gh-space-3);
  border-bottom: var(--gh-border-hairline) solid var(--gh-border-subtle);
}
.sync-panel th, .data-table th { font-family: var(--gh-font-display); font-weight: var(--gh-weight-medium); white-space: nowrap; }
.data-table td.notes p { margin: 0 0 var(--gh-space-2); }
.data-table td.notes p:last-child { margin-bottom: 0; }
td.empty, p.empty { color: var(--gh-text-secondary); }
th.num-col { text-align: right; }
.sync-panel td.num { text-align: right; }

.sync-panel { margin-bottom: var(--gh-space-6); display: none; }
.sync-panel.open { display: block; }
.sync-panel h3 { margin-bottom: var(--gh-space-3); }
.status-ok { color: var(--gh-status-success); font-weight: var(--gh-weight-semibold); }
.status-failed { color: var(--gh-status-error); font-weight: var(--gh-weight-semibold); }

/* Tabs: .gh-tabs / .gh-tab from the design system. */
.tabs { margin-bottom: var(--gh-space-8); flex-wrap: wrap; row-gap: var(--gh-space-3); }
.tabs .gh-tab { white-space: nowrap; }
.tab-panel { display: none; }
.tab-panel.active { display: block; }

/* Eyebrow labels (small caps line above a figure). */
.kpi-label {
  font-family: var(--gh-font-display);
  font-weight: var(--gh-weight-medium);
  font-size: var(--gh-text-caption);
  letter-spacing: var(--gh-tracking-eyebrow);
  text-transform: uppercase;
  color: var(--gh-text-secondary);
  margin-bottom: var(--gh-space-2);
}

/* Agent status card */
.agent-card { margin-bottom: var(--gh-space-6); }
.agent-head { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--gh-space-4); flex-wrap: wrap; }
.agent-head h2 { font-size: var(--gh-text-heading-l); font-weight: var(--gh-weight-medium); margin-bottom: var(--gh-space-1); }
.agent-sub { color: var(--gh-text-secondary); font-size: var(--gh-text-body-s); margin: 0; }
.agent-badges { display: flex; gap: var(--gh-space-2); flex-wrap: wrap; }
.health-message { margin: var(--gh-space-4) 0 0; }
.practice-note {
  margin-top: var(--gh-space-4);
  padding: var(--gh-space-3) var(--gh-space-4);
  background: var(--gh-surface-panel);
  border-radius: var(--gh-radius-sm);
  font-size: var(--gh-text-body-s);
}
.warnings { margin: var(--gh-space-3) 0 0; padding-left: var(--gh-space-5); color: var(--gh-status-warning); font-size: var(--gh-text-body-s); }
.warnings:empty { display: none; }

/* KPI row */
.kpi-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: var(--gh-space-4);
  margin-bottom: var(--gh-space-6);
}
.kpi-card { padding: var(--gh-space-5); }
.kpi-value { font-size: var(--gh-text-display-s); line-height: 1.1; color: var(--gh-text-primary); }
.kpi-value.alert { color: var(--gh-status-error); }
.kpi-detail { font-size: var(--gh-text-caption); color: var(--gh-text-secondary); margin-top: var(--gh-space-1); }

/* Lists */
.list-card { margin-bottom: var(--gh-space-6); }
.card-sub { color: var(--gh-text-secondary); font-size: var(--gh-text-body-s); margin: 0 0 var(--gh-space-4); }
.attention-item { padding: var(--gh-space-4) 0; border-bottom: var(--gh-border-hairline) solid var(--gh-border-subtle); font-size: var(--gh-text-body-s); }
.attention-item:first-child { padding-top: 0; }
.attention-item:last-child { border-bottom: 0; padding-bottom: 0; }
.attention-head { display: flex; flex-wrap: wrap; gap: var(--gh-space-2) var(--gh-space-3); align-items: baseline; }
.attention-item p { margin: var(--gh-space-2) 0; }

a { color: var(--gh-link); }
a:hover { color: var(--gh-link-hover); }

@media (max-width: 640px) {
  .app-header { padding: var(--gh-space-3) var(--gh-space-4); }
  main { padding: var(--gh-space-4); }
}