*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: system-ui, -apple-system, sans-serif;
  font-size: 14px;
  background: #f5f6f8;
  color: #222;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

header {
  background: #1a2a4a;
  color: #fff;
  padding: 14px 24px;
}

header h1 {
  font-size: 18px;
  font-weight: 600;
  letter-spacing: 0.02em;
}

main {
  display: flex;
  flex: 1;
  gap: 0;
  min-height: 0;
}

/* ── Inputs panel ── */
#inputs-panel {
  width: 320px;
  flex-shrink: 0;
  background: #fff;
  border-right: 1px solid #dde1e9;
  padding: 20px 18px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

fieldset {
  border: 1px solid #dde1e9;
  border-radius: 6px;
  padding: 14px 14px 16px;
}

legend {
  font-weight: 600;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #555;
  padding: 0 4px;
}

label {
  display: block;
  margin-top: 12px;
  margin-bottom: 4px;
  font-size: 12px;
  font-weight: 500;
  color: #444;
}

label:first-of-type { margin-top: 10px; }

.hint {
  font-weight: 400;
  color: #999;
}

input[type="text"],
input[type="number"],
select {
  width: 100%;
  padding: 7px 10px;
  border: 1px solid #c8cdd8;
  border-radius: 5px;
  font-size: 13px;
  background: #fafbfc;
  transition: border-color 0.15s;
}

input:focus, select:focus {
  outline: none;
  border-color: #3a6fc4;
  background: #fff;
}

.radio-group {
  display: flex;
  gap: 18px;
  margin-top: 8px;
}

.unit-group { margin-top: 0; margin-bottom: 4px; }

.radio-label {
  font-size: 12px;
  font-weight: 500;
  color: #444;
  align-self: center;
}

.radio-group label {
  display: flex;
  align-items: center;
  gap: 5px;
  margin: 0;
  cursor: pointer;
  font-size: 13px;
}

.meta-box {
  margin-top: 8px;
  padding: 8px 10px;
  background: #f0f4fb;
  border-radius: 5px;
  font-size: 12px;
  color: #3a4a6a;
  line-height: 1.6;
}

/* Custom parent dropdown */
.dropdown {
  list-style: none;
  position: absolute;
  z-index: 100;
  background: #fff;
  border: 1px solid #c8cdd8;
  border-radius: 5px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  max-height: 200px;
  overflow-y: auto;
  width: 282px;
}

.dropdown li {
  padding: 7px 12px;
  cursor: pointer;
  font-size: 13px;
}

.dropdown li:hover, .dropdown li.active {
  background: #eef2fb;
}

#parent-search-wrapper { position: relative; }

#calculate-btn {
  padding: 10px;
  background: #2a5cbf;
  color: #fff;
  border: none;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
}

#calculate-btn:hover { background: #1e47a0; }
#calculate-btn:active { background: #163a85; }

.error {
  padding: 8px 10px;
  background: #fdecea;
  border: 1px solid #f5c6c2;
  border-radius: 5px;
  color: #c0392b;
  font-size: 12px;
}

/* ── Results panel ── */
#results-panel {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

/* ── Tabs ── */
#tab-bar {
  display: flex;
  border-bottom: 2px solid #dde1e9;
  background: #fff;
  padding: 0 20px;
  flex-shrink: 0;
}

.tab-btn {
  padding: 12px 20px;
  border: none;
  background: none;
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
  color: #777;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  transition: color 0.15s, border-color 0.15s;
}

.tab-btn:hover { color: #333; }
.tab-btn.active { color: #2a5cbf; border-bottom-color: #2a5cbf; }

.tab-panel {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 20px;
  gap: 20px;
  min-height: 0;
  overflow-y: auto;
}

#chart-container {
  flex: 1;
  min-height: 380px;
  background: #fff;
  border: 1px solid #dde1e9;
  border-radius: 8px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

#chart-placeholder, #cumulative-placeholder {
  color: #999;
  text-align: center;
  padding: 40px;
}

#chart {
  width: 100%;
  height: 100%;
  min-height: 380px;
}

/* ── Cumulative chart ── */
#cumulative-container {
  background: #fff;
  border: 1px solid #dde1e9;
  border-radius: 8px;
  overflow: hidden;
  min-height: 280px;
  display: flex;
  align-items: center;
  justify-content: center;
}

#cumulative-chart {
  width: 100%;
  min-height: 280px;
}

/* ── Milking table ── */
#table-container {
  background: #fff;
  border: 1px solid #dde1e9;
  border-radius: 8px;
  padding: 0 0 8px;
  overflow: hidden;
}

#milking-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

#milking-table th {
  text-align: left;
  padding: 10px 12px;
  border-bottom: 2px solid #dde1e9;
  color: #555;
  font-weight: 600;
  background: #f8f9fb;
  position: sticky;
  top: 0;
}

#milking-table td {
  padding: 6px 12px;
  border-bottom: 1px solid #eef0f4;
}

#milking-table tr:last-child td { border-bottom: none; }

.above { color: #27ae60; font-weight: 600; }
.below { color: #c0392b; font-weight: 600; }
.no-threshold { color: #999; }

.inferred-box {
  margin-top: 8px;
  padding: 7px 10px;
  background: #eef6ee;
  border: 1px solid #b2d9b2;
  border-radius: 5px;
  font-size: 12px;
  color: #2d6a2d;
}

.hidden { display: none !important; }