:root {
  --paper: #F3F6F1; --panel: #FFFFFF; --ink: #1E2B22; --muted: #5F6D65; --line: #D9E0D8;
  --grass: #2F7A3E; --grass-soft: #E1EEDD; --grass-deep: #1F5A2C;
  --brand: #95C22B; --brand-dark: #6F9A14; --brand-soft: #EEF5DD; --charcoal: #5B5C5E; --charcoal-deep: #4A4B4D;
  --butter: #E4B23E; --butter-soft: #FBF1D6;
  --alert: #B4432F; --alert-soft: #F8E3DF; --warn: #C78A1C; --warn-soft: #FBEFD6; --ok: #2F7A3E;
  --radius: 6px; --font: "IBM Plex Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--paper); color: var(--ink); font: 15px/1.5 var(--font); }
a { color: var(--brand-dark); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3 { font-weight: 600; margin: 0 0 .5rem; letter-spacing: -0.01em; }
h1 { font-size: 1.6rem; } h2 { font-size: 1.15rem; } h3 { font-size: 1rem; }
.layout { display: grid; grid-template-columns: 230px 1fr; min-height: 100vh; }
nav.side { background: var(--charcoal); color: #ECECEC; padding: 1.2rem 1rem; display: flex; flex-direction: column; gap: .2rem; }
nav.side .brand { margin: 0 0 1rem; padding: 0 .2rem; }
nav.side .brand img { width: 100%; max-width: 190px; display: block; }
nav.side .brand small { display: block; font-weight: 400; font-size: .74rem; color: #BDBDBE; margin-top: .4rem; padding-left: .2rem; }
nav.side a { color: #E6E6E6; padding: .42rem .6rem; border-radius: var(--radius); display: block; border-left: 3px solid transparent; }
nav.side a:hover { background: rgba(255,255,255,.08); color: #fff; text-decoration: none; }
nav.side a.active { background: rgba(255,255,255,.08); color: #fff; border-left-color: var(--brand); text-decoration: none; }
nav.side .section { color: var(--brand); font-size: .76rem; margin: .9rem .6rem .2rem; letter-spacing: .02em; }
nav.side .farmlink { font-size: .9rem; padding: .3rem .6rem; }
nav.side .mobile-link { margin-top: .6rem; font-size: .85rem; border: 1px solid var(--brand); color: var(--brand); text-align: center; }
nav.side .user { margin-top: auto; font-size: .82rem; color: #C9C9CA; padding-top: 1rem; border-top: 1px solid rgba(255,255,255,.15); }
main { padding: 1.6rem 2rem 3rem; max-width: 1400px; }
.pagehead { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: 1.2rem; flex-wrap: wrap; }
.pagehead .sub { color: var(--muted); }
.grid { display: grid; gap: 1rem; }
.grid.kpis { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
.grid.two { grid-template-columns: 1fr 1fr; } .grid.three { grid-template-columns: 1fr 1fr 1fr; }
@media (max-width: 1000px) { .grid.two, .grid.three { grid-template-columns: 1fr; } .layout { grid-template-columns: 1fr; } nav.side { flex-direction: row; flex-wrap: wrap; } nav.side .user { margin-top: 0; border: 0; } }
.panel { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 1rem 1.1rem; }
.panel h2 { margin-bottom: .6rem; }
.kpi .label { color: var(--muted); font-size: .82rem; }
.kpi .value { font-size: 1.55rem; font-weight: 600; font-variant-numeric: tabular-nums; line-height: 1.2; }
.kpi .note { color: var(--muted); font-size: .8rem; }
table { width: 100%; border-collapse: collapse; font-size: .9rem; font-variant-numeric: tabular-nums; }
th, td { padding: .45rem .55rem; text-align: left; border-bottom: 1px solid var(--line); vertical-align: top; }
td.n, td:first-child { white-space: nowrap; }
th { color: var(--muted); font-weight: 500; font-size: .8rem; white-space: nowrap; }
td.n, th.n { text-align: right; }
tr:hover td { background: #F7FAF6; }
.flag { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--ok); vertical-align: middle; margin-right: .3rem; }
.flag.warn { background: var(--warn); } .flag.alert { background: var(--alert); }
.pill { display: inline-block; padding: .1rem .55rem; border-radius: 999px; font-size: .78rem; background: var(--grass-soft); color: var(--grass-deep); white-space: nowrap; }
.pill.submitted { background: var(--butter-soft); color: #7A5A0E; } .pill.manager_approved { background: #E3EAF6; color: #2B4A80; }
.pill.approved { background: var(--grass-soft); color: var(--grass-deep); } .pill.rejected { background: var(--alert-soft); color: var(--alert); }
.pill.paid { background: #E6E9E6; color: #4A5650; } .pill.heifer { background: #EEE4F6; color: #5A3A80; }
.pill.health_alert { background: var(--alert-soft); color: var(--alert); } .pill.heat { background: var(--butter-soft); color: #7A5A0E; }
.pill.calving { background: var(--grass-soft); color: var(--grass-deep); } .pill.ai, .pill.pd_positive { background: #E3EAF6; color: #2B4A80; }
.pill.dry_off, .pill.cull { background: #E6E9E6; color: #4A5650; }
form.inline { display: inline; }
label { display: block; font-size: .82rem; color: var(--muted); margin: .5rem 0 .15rem; }
input[type=text], input[type=email], input[type=password], input[type=number], input[type=date], select, textarea {
  width: 100%; padding: .45rem .55rem; border: 1px solid var(--line); border-radius: var(--radius); font: inherit; background: #fff; color: var(--ink); }
input:focus, select:focus, textarea:focus, button:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }
button, .btn { background: var(--brand); color: #1E2B22; font-weight: 500; border: 0; padding: .5rem .9rem; border-radius: var(--radius); font: inherit; cursor: pointer; }
button.secondary, .btn.secondary { background: #fff; color: var(--ink); border: 1px solid var(--line); }
button.danger { background: var(--alert); } button.small, .btn.small { padding: .25rem .6rem; font-size: .82rem; }
.btn:hover { text-decoration: none; filter: brightness(.95); }
.notice { background: var(--brand-soft); border-left: 3px solid var(--brand); padding: .6rem .9rem; border-radius: var(--radius); margin-bottom: 1rem; }
.notice.bad { background: var(--alert-soft); border-color: var(--alert); } .notice.warn { background: var(--warn-soft); border-color: var(--warn); }
.chart { position: relative; height: 260px; } .chart.tall { height: 340px; }
.tabs { display: flex; gap: .4rem; margin-bottom: 1rem; flex-wrap: wrap; }
.tabs a { padding: .35rem .8rem; border: 1px solid var(--line); border-radius: 999px; background: #fff; font-size: .88rem; }
.tabs a.active { background: var(--charcoal); color: #fff; border-color: var(--charcoal); }
.timeline { list-style: none; padding: 0; margin: 0; } .timeline li { padding: .45rem 0; border-bottom: 1px solid var(--line); font-size: .9rem; }
.timeline .when { color: var(--muted); font-size: .8rem; }
.login { max-width: 380px; margin: 12vh auto; }
.login { background: var(--charcoal); border: 0; color: #fff; } .login .brand { text-align: center; margin-bottom: 1.4rem; } .login .brand img { width: 220px; } .login label { color: #D5D5D6; } .login .muted { color: #C9C9CA; } .login a { color: var(--brand); }
.muted { color: var(--muted); } .small { font-size: .82rem; } .right { text-align: right; }
.formgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0 1rem; }
details summary { cursor: pointer; color: var(--grass-deep); }
code { background: #EEF1EC; padding: .05rem .3rem; border-radius: 3px; font-size: .85em; }
.demo-badge { font-size: .74rem; color: #7A5A0E; background: var(--butter-soft); padding: .1rem .5rem; border-radius: 999px; }
.swatch { display:inline-block; width:11px; height:11px; border-radius:3px; margin-right:.35rem; vertical-align:middle; }
.fieldlabel { background: rgba(255,255,255,.85); border: 0; box-shadow: none; font-size: 11px; font-weight: 500; color: #1E2B22; padding: 1px 4px; border-radius: 3px; }
.fieldlabel::before { display:none; }
th.rot { writing-mode: vertical-rl; transform: rotate(180deg); white-space: nowrap; font-size: .74rem; padding: .3rem .2rem; vertical-align: bottom; }
td.cell { text-align:center; font-size:.78rem; min-width: 44px; }
td.cell.ok { background: var(--grass-soft); } td.cell.warn { background: var(--warn-soft); } td.cell.alert { background: var(--alert-soft); }
.hero { background: linear-gradient(135deg, var(--charcoal-deep) 0%, var(--charcoal) 60%, #6E6F71 100%); border-left: 6px solid var(--brand); color: #fff; border-radius: 10px; padding: 1.6rem 1.8rem; margin-bottom: 1.2rem; display: flex; justify-content: space-between; gap: 2rem; align-items: center; flex-wrap: wrap; }
.hero .eyebrow { color: var(--brand); font-size: .85rem; margin-bottom: .3rem; }
.hero .big { font-size: 2.6rem; font-weight: 600; letter-spacing: -0.02em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.hero .big span { font-size: 1.1rem; font-weight: 400; color: #DADADA; letter-spacing: 0; }
.hero .sub { color: #DADADA; margin-top: .5rem; font-size: .92rem; }
.hero-right { display: flex; gap: 1.2rem; align-items: center; flex-wrap: wrap; }
.hero .stat { text-align: center; font-size: .78rem; color: #DADADA; }
.hero .stat .k { display: block; font-size: 1.6rem; font-weight: 600; color: #fff; line-height: 1.1; }
.hero .demo-badge { background: rgba(255,255,255,.15); color: #FBF1D6; }
.bar { background: #E9EDE7; border-radius: 999px; height: 8px; overflow: hidden; margin: .25rem 0; } .bar > div { background: var(--brand); height: 100%; border-radius: 999px; max-width: 100%; }