@import url("/core/css/genemap-brand.css");

/* ============================================================================
   Genemap — Helical design language
   ============================================================================
   The platform is genetics-native. The visual identity should reflect that.
   This file adds:
     1. Helical visual motifs — DNA-strand stage tracker, helical timeline
     2. Mobile-first responsive overrides for the inline layouts that break
     3. Print CSS for mating plans, bull purchase briefs, heifer rankings
     4. Refined typographic hierarchy with serif displays for headlines

   Loaded AFTER core.css. Only adds, never removes — safe to bolt on.
   ============================================================================ */

/* ── Helical accent variables ─────────────────────────────────────────── */
:root {
  /* Strand colours — used in helical visualisations */
  --strand-genetic:   #1A4D2E;  /* primary green — additive merit, the inheritance side */
  --strand-phenotype: #C8A85B;  /* gold — expressed/realised, the measurement side */
  --strand-mid:       rgba(26, 77, 46, 0.12);
  --strand-rung:      rgba(60, 70, 64, 0.18);

  /* Helical depth — used for shadows on helix elements */
  --helix-shadow: 0 4px 16px rgba(20, 30, 25, 0.06);
  --helix-glow:   0 0 0 4px rgba(26, 77, 46, 0.06);
}

/* ── Helix stage tracker (replaces the linear stage list) ─────────────── */
/* Used on dashboard.html. Each stage sits on alternating strands of a helix.
   The strand crosses between stages, suggesting the closed-loop structure
   genetic ↔ phenotype ↔ calibration ↔ next generation. */

.helix-track {
  position: relative;
  margin: 30px 0 60px;
  padding: 20px 0;
}

.helix-track::before {
  /* The DNA backbone — a subtle vertical guide */
  content: "";
  position: absolute;
  left: 50px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: linear-gradient(to bottom,
    transparent 0%,
    var(--strand-mid) 8%,
    var(--strand-mid) 92%,
    transparent 100%);
  z-index: 0;
}

.helix-stage {
  position: relative;
  display: grid;
  grid-template-columns: 100px 1fr auto;
  gap: 18px;
  align-items: center;
  padding: 18px 22px;
  margin-bottom: 14px;
  background: var(--card);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  text-decoration: none;
  color: inherit;
  transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s;
  z-index: 1;
}

.helix-stage:hover {
  border-color: var(--strand-genetic);
  box-shadow: var(--helix-shadow);
  transform: translateX(2px);
}

.helix-stage.complete {
  background: var(--accent-soft);
  border-color: var(--accent);
}
.helix-stage.complete .helix-node {
  background: var(--accent);
  box-shadow: 0 0 0 6px var(--accent-soft);
}
.helix-stage.complete .helix-node-num {
  color: #fff;
}

.helix-stage.current {
  border: 2px solid var(--accent);
  padding: 17px 21px;
  box-shadow: var(--helix-glow);
}
.helix-stage.current .helix-node {
  background: #fff;
  border: 2px solid var(--accent);
}
.helix-stage.current .helix-node-num {
  color: var(--accent);
}

.helix-stage.locked {
  opacity: 0.45;
  pointer-events: none;
}

.helix-node {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--card);
  border: 2px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 22px;
  color: var(--muted);
  margin-left: 22px;
  position: relative;
  z-index: 2;
  flex-shrink: 0;
}
.helix-node-num { line-height: 1; }

/* The helical strand SVG sits behind, alternating left-right */
.helix-strand {
  position: absolute;
  left: 0;
  top: 0;
  width: 100px;
  height: 100%;
  pointer-events: none;
  z-index: 0;
}

.helix-stage-body { min-width: 0; }
.helix-stage-body h3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 17px;
  margin: 0 0 4px;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.helix-stage-body p {
  margin: 0;
  font-size: 12.5px;
  color: var(--muted);
  line-height: 1.55;
}

.helix-stage-status {
  font-size: 10.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 5px 11px;
  border-radius: 99px;
  white-space: nowrap;
  flex-shrink: 0;
}
.helix-stage-status.todo {
  background: var(--paper);
  color: var(--muted);
}
.helix-stage-status.complete {
  background: var(--accent);
  color: #fff;
}
.helix-stage-status.current {
  background: #fff;
  color: var(--accent);
  border: 1px solid var(--accent);
}

/* ── Helical loop diagram — the closed-cycle visual ──────────────────── */
/* Used at the top of the dashboard to communicate the platform's defining
   feature: the closed loop that improves predictions every cycle. */

.helix-loop {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 36px 28px 28px;
  margin: 24px 0 8px;
  background: linear-gradient(135deg,
    rgba(26, 77, 46, 0.045) 0%,
    rgba(200, 168, 91, 0.045) 100%);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  position: relative;
  overflow: hidden;
}

/* Subtle gradient accent at corners — adds depth without animation */
.helix-loop::before,
.helix-loop::after {
  content: "";
  position: absolute;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  pointer-events: none;
  opacity: 0.3;
}
.helix-loop::before {
  top: -80px;
  left: -80px;
  background: radial-gradient(circle, rgba(26, 77, 46, 0.18), transparent 70%);
}
.helix-loop::after {
  bottom: -80px;
  right: -80px;
  background: radial-gradient(circle, rgba(200, 168, 91, 0.18), transparent 70%);
}

.helix-loop-svg {
  width: 100%;
  max-width: 580px;
  height: auto;
  position: relative;
  z-index: 1;
  /* Subtle slow breathing — pulses calibration, reinforces "alive" loop.
     Very gentle: 4% scale change over 8 seconds. */
  animation: helix-breathe 8s ease-in-out infinite;
}

@keyframes helix-breathe {
  0%, 100% { transform: scale(1); opacity: 1; }
  50%      { transform: scale(1.015); opacity: 0.96; }
}

/* Respect prefers-reduced-motion — turn off the breathing animation */
@media (prefers-reduced-motion: reduce) {
  .helix-loop-svg { animation: none; }
}

.helix-loop-caption {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 14px;
  color: var(--soft);
  text-align: center;
  margin-top: 16px;
  line-height: 1.5;
}

/* ── Helical card border accent ──────────────────────────────────────── */
/* For cards that represent closed-loop outcomes — sire performance,
   lifetime profitability, calibration. A subtle gradient stripe down
   the left edge marking these as "loop-derived" insights. */

.card.loop-card {
  position: relative;
  overflow: hidden;
}
.card.loop-card::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: linear-gradient(to bottom,
    var(--strand-genetic) 0%,
    var(--strand-genetic) 35%,
    var(--strand-phenotype) 65%,
    var(--strand-phenotype) 100%);
}

/* Genetics-themed section heading — for major page sections */
.section-heading-helical {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 38px 0 18px;
}
.section-heading-helical::before,
.section-heading-helical::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(to right,
    transparent,
    var(--border) 20%,
    var(--border) 80%,
    transparent);
}
.section-heading-helical h2 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 20px;
  margin: 0;
  color: var(--ink);
  letter-spacing: -0.01em;
}

/* ── Mobile responsiveness — the inline grids that break ─────────────── */

@media (max-width: 760px) {
  /* Helix stage compresses node and tightens spacing */
  .helix-track::before { left: 36px; }
  .helix-stage {
    grid-template-columns: 72px 1fr;
    gap: 12px;
    padding: 14px 16px;
  }
  .helix-stage-status {
    grid-column: 2;
    justify-self: start;
    margin-top: 4px;
  }
  .helix-node {
    width: 44px;
    height: 44px;
    font-size: 18px;
    margin-left: 14px;
  }
  .helix-stage-body h3 { font-size: 15px; }

  /* Helical loop diagram — tighten */
  .helix-loop { padding: 18px 16px; }

  /* Tab strip — let it scroll horizontally */
  .tabs-strip,
  [role="tablist"] {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap;
    gap: 0;
  }
  .tabs-strip .tab,
  [role="tablist"] .tab {
    flex-shrink: 0;
    white-space: nowrap;
  }

  /* All inline grids that assume desktop columns */
  .field-row,
  .field-row.cols-2,
  .field-row.cols-3,
  .field-row.cols-4,
  .grid,
  .grid-2col,
  .grid-3col,
  .grid-4col,
  .bull-input-grid,
  .lp-totals-grid,
  .projected-grid {
    grid-template-columns: 1fr !important;
  }

  /* Cards lose their generous padding */
  .card { padding: 16px 14px; }
  .card h2 { font-size: 16px; }

  /* All tables get horizontal scroll on small screens */
  table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
    max-width: 100%;
  }
  table thead { white-space: nowrap; }

  /* Specific table rescues — these have wide labels */
  .heifer-table,
  .lp-sire-table,
  .trait-realisation-table,
  .bd-trait-table {
    font-size: 11.5px;
  }
  .heifer-table th, .heifer-table td,
  .lp-sire-table th, .lp-sire-table td,
  .trait-realisation-table th, .trait-realisation-table td {
    padding: 8px 10px;
  }

  /* Cow group rows + rec cards stack rather than sit side-by-side */
  .cow-group-row {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }
  .cow-group-row .cg-count {
    font-size: 14px;
  }

  /* Recommendation card headers wrap correctly */
  .recommendation-card-header,
  .allocation-block-header,
  .sire-row-header,
  .bp-bull-profile-header {
    flex-direction: column;
    align-items: flex-start !important;
    gap: 8px !important;
  }

  /* Composite parent rows reflow to single column */
  .composite-parent-row {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }
  .composite-parent-row .remove-parent {
    align-self: flex-end !important;
    margin-top: -28px;
  }

  /* Bull purchase profile — target traits become 2-line not 3-column */
  .bp-trait-row {
    grid-template-columns: 1fr !important;
    gap: 4px !important;
    padding: 8px 0 !important;
  }
  .bp-trait-row .trait-target {
    margin-left: 0 !important;
  }
  .bp-trait-row .trait-why {
    font-size: 11px !important;
  }

  /* Stats tiles smaller */
  .lp-total-tile { padding: 10px 12px; }
  .lp-total-tile .val { font-size: 16px; }
  .projected-tile { padding: 8px 10px; }

  /* Bull catalogue inline expansion stacks */
  .bd-card-grid {
    grid-template-columns: 1fr !important;
  }

  /* Loose buttons in toolbars wrap */
  .card > div[style*="display:flex"][style*="gap"] {
    flex-wrap: wrap;
  }
}

/* Small mobile — phones in portrait */
@media (max-width: 480px) {
  .wrap, .wrap-narrow { padding: 16px 12px 32px; }
  h1 { font-size: 22px; }
  .card { padding: 14px 12px; }
  .card h2 { font-size: 15px; }

  .helix-stage { padding: 12px 14px; gap: 10px; }
  .helix-stage-body h3 { font-size: 14px; }
  .helix-stage-body p { font-size: 11.5px; }

  /* Tighten button sizes */
  .btn { padding: 7px 14px; font-size: 12.5px; }
}

/* ── Print styles — for mating plans, purchase briefs, heifer rankings ─ */
/* Producers print these and take them to the yards. The print should be
   clean, monochrome where it doesn't lose meaning, and remove every
   piece of UI chrome that doesn't carry information. */

@media print {
  /* Hide all UI chrome */
  .mgt-topbar,
  .mgt-footer,
  .tabs-strip,
  [role="tablist"],
  .tab,
  .btn,
  button,
  #event-modal,
  #bulk-modal,
  .helix-stage-status,
  .helix-loop {
    display: none !important;
  }

  /* Reset page background */
  body {
    background: #fff !important;
    font-size: 10pt;
    color: #000;
  }
  .wrap, .wrap-narrow {
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  /* Cards print as flat blocks with simple borders */
  .card {
    border: 1px solid #ccc !important;
    box-shadow: none !important;
    page-break-inside: avoid;
    margin-bottom: 14px !important;
    padding: 14px !important;
  }
  .card h2 {
    font-family: serif;
    font-size: 14pt;
    margin-bottom: 8px !important;
  }

  /* Hide tabs that aren't currently active in print */
  .tab-pane:not(.active) { display: none !important; }
  .tab-pane.active { display: block !important; }

  /* Tables print full width with borders */
  table {
    width: 100% !important;
    border-collapse: collapse !important;
    page-break-inside: avoid;
    display: table !important;          /* override mobile overflow:block */
    white-space: normal !important;
    font-size: 9pt;
  }
  table th,
  table td {
    border: 1px solid #ccc !important;
    padding: 6px 8px !important;
    background: transparent !important;
  }
  table th {
    background: #f5f5f5 !important;
    font-weight: 700;
  }

  /* Pills and badges print as text with parentheses */
  .verdict-pill,
  .recommendation-pill,
  .rec-rank-pill,
  .bp-priority-pill,
  .group-tag,
  .cg-class,
  .accuracy-pill {
    background: transparent !important;
    color: #000 !important;
    border: 1px solid #999 !important;
    padding: 1px 5px !important;
    font-size: 8pt;
  }

  /* Coloured profit/score remains visible but black-on-white friendly */
  .profit-positive { color: #000 !important; font-weight: 700; }
  .profit-negative { color: #000 !important; font-weight: 700; text-decoration: underline; }

  /* Page break suggestions */
  .card,
  .allocation-block,
  .sire-row,
  .bp-bull-profile {
    page-break-inside: avoid;
  }
  h1, h2, h3 {
    page-break-after: avoid;
  }

  /* Print header footer prep */
  @page {
    margin: 18mm 14mm 18mm 14mm;
    size: A4 portrait;
  }

  /* Helical accents become a simple solid border */
  .card.loop-card::before {
    background: #000 !important;
    width: 2px !important;
  }

  /* Add a print-only header to every printout */
  body::before {
    content: "Moorella Farming · MGT Cattle Platform";
    display: block;
    font-family: serif;
    font-size: 10pt;
    text-align: center;
    border-bottom: 1px solid #999;
    padding-bottom: 6px;
    margin-bottom: 12px;
  }
}