/* ═══════════════════════════════════════════════════
   Технології СЗР — довідник регламентів по культурах
   ═══════════════════════════════════════════════════ */

/* ─── СЗР page tabs (Довідник / Технології / Розрахунок потреби) ────── */
.szr-tabs {
  display: flex;
  gap: 6px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--border);
}
.szr-tab {
  font-size: 13.5px;
  font-weight: 500;
  padding: 10px 16px;
  border: none;
  background: none;
  color: var(--text-muted);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}
.szr-tab.active {
  color: var(--green);
  border-bottom-color: var(--green);
  font-weight: 600;
}

#tech-archive-toggle-btn.active {
  background: var(--green);
  color: #fff;
  border-color: var(--green);
}

.req-status-done    { background: #E3F5E8; color: #1E7A3D; }
.req-status-pending  { background: #FDEBEA; color: #C0392B; }

.req-item-row { cursor: pointer; }
.req-item-row:hover { background: var(--bg); }
.req-breakdown-row td { background: var(--bg); padding: 8px 10px 12px; }

.req-note {
  font-size: 12.5px;
  color: var(--text-muted);
  background: #FFF8E5;
  border: 1px solid #F5E3AE;
  border-radius: 8px;
  padding: 10px 14px;
}

/* ─── Crop tabs above the technology list ───────────────────────────── */
.tech-crop-tabs {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.tech-crop-tab {
  font-size: 12.5px;
  font-weight: 500;
  padding: 6px 14px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-muted);
  cursor: pointer;
}
.tech-crop-tab.active {
  background: var(--green);
  color: #fff;
  border-color: var(--green);
}

/* ─── Compact technology list (about half the page width) ──────────── */
.tech-list-wrap {
  max-width: 620px;
}
.tech-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.tech-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 14px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  cursor: pointer;
}
.tech-card:hover {
  border-color: var(--green);
}
.tech-card-name {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text);
}
.tech-card-date {
  font-size: 12px;
  color: var(--text-muted);
}
.tech-card-right {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

/* ─── Status badges ──────────────────────────────────────────────────── */
.tech-status {
  display: inline-block;
  font-size: 11px;
  font-weight: 500;
  padding: 3px 9px;
  border-radius: 5px;
  white-space: nowrap;
}
.tech-status-new         { background: #EAF0FF; color: #3350A5; }
.tech-status-in_progress { background: #FFF3D0; color: #8A6300; }
.tech-status-completed   { background: #E3F5E8; color: #1E7A3D; }

/* ─── Стage colour bands (cycled by stage order) ────────────────────── */
.tech-stage {
  border-radius: 10px;
  padding: 12px 14px;
  margin-bottom: 14px;
  border: 1px solid transparent;
}
.tech-stage-0 { background: #EAF2FF; border-color: #CFE0FF; }
.tech-stage-1 { background: #FFF6E0; border-color: #F5E3AE; }
.tech-stage-2 { background: #EAF8EC; border-color: #C9EACD; }
.tech-stage-3 { background: #FDEBF0; border-color: #F6C9D8; }
.tech-stage-4 { background: #F1EAFB; border-color: #D9C6F2; }
.tech-stage-5 { background: #E6F7F9; border-color: #BFE9EC; }

.tech-stage-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
.tech-stage-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}
.tech-stage-fields {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.tech-stage-fields .eq-field { min-width: 160px; flex: 1; }
.tech-stage-fields textarea { min-height: 36px; }

.tech-item-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12.5px;
  background: var(--surface);
  border-radius: 6px;
  overflow: hidden;
}
.tech-item-table th, .tech-item-table td {
  padding: 6px 8px;
  text-align: left;
  border-bottom: 1px solid var(--border);
}
.tech-item-table input[type="number"] {
  width: 80px;
  padding: 3px 6px;
  font-size: 12.5px;
}

.tech-stage-add-row {
  margin-top: 8px;
  display: flex;
  justify-content: space-between;
}

/* ─── Stacking ────────────────────────────────────────────────────────
   The preparation catalog can be opened as a "picker" from inside the
   technology editor modal. Both share .eq-modal-backdrop (same z-index),
   so DOM order would otherwise decide which sits on top — this forces
   the catalog (and its own edit-preparation modal) above the editor. */
#modal-szr-catalog { z-index: 410; }
#modal-szr-prep     { z-index: 420; }

/* ─── Tag for the sowing-plan column ────────────────────────────────── */
.tech-tag {
  display: inline-block;
  font-size: 11.5px;
  font-weight: 500;
  padding: 3px 9px;
  border-radius: 5px;
  white-space: nowrap;
  background: #EAF0FF;
  color: #3350A5;
}
.tech-tag-custom {
  background: #F3E3FF;
  color: #7D3C98;
}