/* ─── Summary strip ───────────────────────────────────────────────────── */
.fields-summary {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-bottom: 18px;
}
.fsummary-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 13px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.fsummary-icon {
  width: 36px; height: 36px;
  border-radius: 7px;
  display: flex; align-items: center; justify-content: center;
  font-size: 16px;
  flex-shrink: 0;
}
.icon-green { background: var(--green-light); }
.icon-brown { background: var(--brown-light); }
.icon-gray  { background: #F0F0EE; }
.fsummary-val { font-size: 20px; font-weight: 700; }
.fsummary-lbl { font-size: 11px; color: var(--text-muted); margin-top: 1px; }

/* ─── Toolbar ─────────────────────────────────────────────────────────── */
.page-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
  gap: 12px;
}
.toolbar-left { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

.search-input {
  padding: 7px 12px;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 13px;
  background: var(--surface);
  color: var(--text);
  width: 220px;
  outline: none;
  transition: border-color .15s;
  font-family: inherit;
}
.search-input:focus { border-color: var(--green); }
.search-input::placeholder { color: var(--text-muted); }

.select-filter {
  padding: 7px 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 13px;
  background: var(--surface);
  color: var(--text);
  outline: none;
  cursor: pointer;
  font-family: inherit;
}

/* ─── Table wrapper (scrollable) ─────────────────────────────────────── */
.table-wrap {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow-x: auto;
}

/* ─── Group header row ────────────────────────────────────────────────── */
.group-header-row > td {
  padding: 0;
  background: var(--green-light);
  border-top: 2px solid var(--green);
  border-bottom: 1px solid #C8DDD0;
}
.field-group:first-child .group-header-row > td {
  border-top: none;
}
.group-header-inner {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  cursor: pointer;
  user-select: none;
}
.group-toggle {
  font-size: 10px;
  color: var(--green);
  transition: transform .2s ease;
  flex-shrink: 0;
  line-height: 1;
}
.group-toggle.collapsed { transform: rotate(-90deg); }
.group-num {
  font-size: 13px;
  font-weight: 700;
  color: var(--green);
}
.group-meta {
  font-size: 11.5px;
  color: var(--text-muted);
  padding: 2px 8px;
  background: rgba(78,122,90,.1);
  border-radius: 10px;
}
.group-kletka-actions {
  display: flex;
  gap: 4px;
  margin-left: 8px;
}
.group-kletka-actions .icon-btn {
  opacity: 0;
  transition: opacity .15s;
}
.group-header-row:hover .group-kletka-actions .icon-btn {
  opacity: 1;
}
.group-area-block {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 16px;
}
.group-area-item {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}
.group-area-label {
  font-size: 10px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .4px;
}
.group-area-val {
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
}

/* ─── Field rows ──────────────────────────────────────────────────────── */
.field-row td {
  padding-left: 22px;
}
.field-row.hidden { display: none; }
.field-row:hover td { background: #FAFAF8; }

/* ─── Group subtotal row ──────────────────────────────────────────────── */
.group-subtotal.hidden { display: none; }
.group-subtotal td {
  background: #F3F7F4;
  border-top: 1px dashed #C8DDD0;
  font-size: 12px;
  color: var(--text-muted);
  padding: 8px 16px;
}
.group-subtotal .subtotal-label {
  font-weight: 600;
  color: var(--text);
  padding-left: 38px;
}
.group-subtotal .subtotal-val {
  font-weight: 700;
  color: var(--green);
}

/* ─── Crop tags ───────────────────────────────────────────────────────── */
.crop-tag {
  display: inline-block;
  font-size: 11.5px;
  font-weight: 500;
  padding: 3px 9px;
  border-radius: 5px;
  white-space: nowrap;
}
/* Every crop carries its own tone in --ct-h / --ct-s (assigned in
   crop-colors.js); the tint pair is derived here so both themes stay consistent
   without the JS knowing which theme is on. */
.crop-tag.ct-auto {
  background: hsl(var(--ct-h) var(--ct-s, 64%) 87%);
  color:      hsl(var(--ct-h) calc(var(--ct-s, 64%) * 0.95) 26%);
}
.ct-empty    { background: #F0F0EE; color: var(--text-muted); font-style: italic; }

/* ─── Predecessor tags ────────────────────────────────────────────────── */
.pred-tag {
  display: inline-block;
  font-size: 11px;
  font-weight: 500;
  padding: 2px 8px;
  border-radius: 4px;
  white-space: nowrap;
}
.pt-sun    { background: #EAF2EC; color: #3D6248; }
.pt-phac   { background: #FAE8EF; color: #9A3060; }
.pt-millet { background: #EBF0FF; color: #3850A0; }
.pt-rape   { background: #FFE5B0; color: #8A5000; }
.pt-wheat  { background: #FFFAD0; color: #806200; }
.pt-barley { background: #D8F2FF; color: #1570A3; }

/* ─── Table footer ────────────────────────────────────────────────────── */
.table-footer {
  padding: 10px 16px;
  border-top: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12px;
  color: var(--text-muted);
  background: var(--bg);
  white-space: nowrap;
}
.pagination { display: flex; gap: 4px; }
.page-btn {
  width: 28px; height: 28px;
  border-radius: 5px;
  border: 1px solid var(--border);
  background: transparent;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px;
  color: var(--text-muted);
  transition: all .15s;
  font-family: inherit;
}
.page-btn:hover       { background: var(--green-light); color: var(--green); }
.page-btn.active-page { background: var(--green); color: #fff; border-color: var(--green); }

/* ─── Crop statistics ─────────────────────────────────────────────────── */
.crop-stats-card {
  margin-bottom: 14px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.crop-stat-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 20px;
  border-bottom: 1px solid var(--border);
}
.crop-stat-item:last-child { border-bottom: none; }
.crop-stat-dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}
.crop-stat-name {
  width: 170px;
  font-size: 13px;
  flex-shrink: 0;
}
.crop-stat-bar-wrap {
  flex: 1;
  height: 7px;
  background: var(--border);
  border-radius: 4px;
  overflow: hidden;
  min-width: 60px;
}
.crop-stat-fill {
  height: 100%;
  border-radius: 4px;
}
.crop-stat-item.ct-auto .crop-stat-dot  { background: hsl(var(--ct-h) calc(var(--ct-s, 64%) * 0.9)  45%); }
.crop-stat-item.ct-auto .crop-stat-fill { background: hsl(var(--ct-h) calc(var(--ct-s, 64%) * 1.05) 72%); }
.crop-stat-area {
  width: 80px;
  text-align: right;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  flex-shrink: 0;
}
.crop-stat-fields {
  width: 60px;
  text-align: right;
  font-size: 12px;
  color: var(--text-muted);
  flex-shrink: 0;
}
/* ─── Two-col area group header ──────────────────────────────────────── */
.area-group-th {
  text-align: center !important;
  background: #EBF4EF !important;
  color: var(--green) !important;
  border-left: 2px solid #BAD4C4 !important;
  border-right: 2px solid #BAD4C4 !important;
  letter-spacing: 0;
}
.area-sub-th {
  background: #F2F8F4 !important;
  text-align: right !important;
  padding-top: 5px !important;
  padding-bottom: 6px !important;
  font-size: 10px !important;
  color: var(--green) !important;
}
.area-sub-th:first-child { border-left: 2px solid #BAD4C4 !important; }
.area-sub-th:last-child  { border-right: 2px solid #BAD4C4 !important; }
thead th[rowspan]         { vertical-align: middle; }
tbody td.area-col         { text-align: right; background: #FAFDF9; }

.crop-stats-total {
  padding: 10px 20px;
  background: var(--bg);
  border-top: 1px solid var(--border);
  font-size: 12px;
  color: var(--text-muted);
  display: flex;
  gap: 20px;
}
.crop-stats-total strong { color: var(--text); }

/* ─── Field History (Diary) ──────────────────────────────────────────────── */
/* .eq-modal.fh-modal (not just .fh-modal) so this reliably beats equipment.css's
   generic .eq-modal{width:520px} regardless of stylesheet load order — same
   specificity, so plain .fh-modal alone loses when equipment.css loads later. */
.eq-modal.fh-modal { width: 1400px; max-width: 96vw; max-height: 92vh; }
.fh-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.fh-field-title { font-size: 18px; font-weight: 700; color: var(--text); }
.fh-field-meta  { font-size: 13px; color: var(--text-muted); margin-top: 4px; }
.fh-header-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.fh-pred-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 12px;
  padding: 10px 12px;
  background: var(--bg);
  border-radius: 8px;
  font-size: 12.5px;
}
.fh-pred-lbl { color: var(--text-muted); font-weight: 500; }
.fh-readonly-note {
  font-size: 12px;
  color: var(--text-muted);
  font-style: italic;
  margin: 10px 0 4px;
}
.fh-pred-chip {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 3px 8px;
  color: var(--text);
}
.fh-mini-table { width: 100%; border-collapse: collapse; font-size: 12.5px; margin-bottom: 8px; }
.fh-mini-table th {
  text-align: left;
  padding: 6px 8px;
  color: var(--text-muted);
  font-weight: 500;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
.fh-mini-table td { padding: 6px 8px; border-bottom: 1px solid var(--border); color: var(--text); }
.fh-row-actions { display: flex; gap: 4px; white-space: nowrap; }
.fh-empty { text-align: center; color: var(--text-muted); padding: 12px !important; }
.fh-add-btn { font-size: 12px; padding: 5px 10px; margin-bottom: 6px; }
.fh-inline-form {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px;
  background: var(--bg);
  border-radius: 8px;
  padding: 12px;
  margin-bottom: 10px;
}
.fh-inline-form .eq-field label { font-size: 11px; }
.fh-inline-form-actions {
  grid-column: 1 / -1;
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}
.fh-notes-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.fh-note-block { background: var(--bg); border-radius: 8px; padding: 12px; }
.fh-note-title { font-size: 12.5px; font-weight: 600; color: var(--text); margin-bottom: 8px; }
@media (max-width: 720px) {
  .fh-notes-grid { grid-template-columns: 1fr; }
}

/* Looks disabled but stays clickable, so clicking it while not yet
   harvested can show an explanatory alert instead of doing nothing. */
.btn-inactive-look { opacity: .5; }

/* ─── Sowing plan wizard — inline "create & confirm" rows ────────────────── */
.sm-confirm-row {
  display: flex;
  gap: 8px;
  margin-top: 6px;
}
.sm-confirm-row input { flex: 1; }
.sm-confirm-row .btn { padding: 8px 14px; font-size: 12.5px; white-space: nowrap; }
.sm-resolved-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  color: var(--green);
  margin-top: 6px;
}

/* ─── Sowing material page — crop groups ─────────────────────────────────── */
.sm-group { margin-bottom: 20px; }
.sm-group-title {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 10px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 8px;
  cursor: pointer;
  user-select: none;
}
.sm-group-title:hover { color: var(--green); }
.sm-group-chevron { font-size: 11px; color: var(--text-muted); width: 10px; display: inline-block; flex-shrink: 0; }
.sm-group-count { font-size: 12.5px; font-weight: 500; color: var(--text-muted); }
.sm-group-totals td {
  font-weight: 600;
  color: var(--text);
  background: var(--bg);
  border-top: 1px solid var(--border);
  white-space: nowrap;
}

/* The data table itself scrolls horizontally inside .table-wrap (see
   components.css) instead of overflowing the page — every column stays
   readable, you just scroll sideways for the ones that don't fit. */
#page-sowing-material .table-wrap table { width: max-content; min-width: 100%; }
#page-sowing-material .table-wrap th,
#page-sowing-material .table-wrap td { white-space: nowrap; }

.sm-grand-total {
  text-align: right;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  padding: 12px 4px 4px;
}
.sm-sort-summary {
  width: 100%;
  max-width: 340px;
  margin-top: 10px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow-x: auto;
}
.sm-sort-summary table { width: 100%; }
.sm-sort-summary th { padding: 8px 12px; font-size: 11px; white-space: nowrap; }
.sm-sort-summary td { padding: 7px 12px; font-size: 12.5px; white-space: nowrap; }
.sm-sort-summary td:last-child, .sm-sort-summary th:last-child { text-align: right; }

/* ─── Sowing material — narrower screens ─────────────────────────────────── */
@media (max-width: 1100px) {
  #page-sowing-material .table-wrap th,
  #page-sowing-material .table-wrap td { padding: 8px 10px; font-size: 12.5px; }
  .sm-sort-summary { max-width: 100%; }
}

/* ─── Field editor — read-only status + predecessor history ─────────────── */
.pole-status-readout {
  font-size: 13px;
  padding: 8px 12px;
  background: var(--bg);
  border-radius: 6px;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.pole-predecessor-row { align-items: flex-end; margin-bottom: 6px; }
.pole-predecessor-row label { font-size: 12px; font-weight: 600; color: var(--text-muted); }