/* ─────────────────────────────────────────────────────────────────────────────
   Alfalfa Growth Tracker – PEAQ Method  |  public.css v2.0
   Design language: Clean, precision-agriculture feel. Deep greens & earth tones.
   Font: Georgia (display) + system sans (body)
───────────────────────────────────────────────────────────────────────────── */

:root {
    --agt-green-dark:   #1a5c35;
    --agt-green:        #27ae60;
    --agt-green-light:  #e8f5e9;
    --agt-amber:        #f39c12;
    --agt-amber-light:  #fff8e1;
    --agt-red:          #c0392b;
    --agt-red-light:    #fdecea;
    --agt-orange:       #e67e22;
    --agt-orange-light: #fff3e0;
    --agt-blue:         #2980b9;
    --agt-blue-light:   #e3f2fd;
    --agt-yellow:       #f1c40f;
    --agt-yellow-light: #fffde7;

    --agt-surface:      #ffffff;
    --agt-bg:           #f5f7f4;
    --agt-border:       #dde5d8;
    --agt-text:         #2c3e50;
    --agt-text-muted:   #6b7c69;

    --agt-radius:       10px;
    --agt-shadow:       0 2px 12px rgba(0,0,0,0.08);
    --agt-shadow-lg:    0 8px 32px rgba(0,0,0,0.12);

    --agt-font-display: Georgia, 'Times New Roman', serif;
    --agt-font-body:    -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
}

/* ─── Base reset ─── */
.agt-dashboard *,
.agt-predictor * {
    box-sizing: border-box;
}

.agt-dashboard,
.agt-predictor {
    font-family:  var(--agt-font-body);
    color:        var(--agt-text);
    background:   var(--agt-bg);
    border-radius: var(--agt-radius);
    padding:      24px;
    max-width:    1200px;
    margin:       0 auto;
}

/* ─── Section title ─── */
.agt-section-title {
    font-family:  var(--agt-font-display);
    font-size:    1.1rem;
    color:        var(--agt-green-dark);
    margin:       0 0 16px;
    padding-bottom: 8px;
    border-bottom: 2px solid var(--agt-green-light);
}

/* ─── Login notice ─── */
.agt-login-notice {
    padding: 16px;
    background: var(--agt-blue-light);
    border-left: 4px solid var(--agt-blue);
    border-radius: var(--agt-radius);
}

/* ════════════════════════════════════════════════════════════════════════════
   PREDICTOR
═══════════════════════════════════════════════════════════════════════════ */

.agt-predictor__header {
    display:     flex;
    align-items: center;
    gap:         16px;
    margin-bottom: 28px;
}

.agt-predictor__icon {
    font-size:   2.8rem;
    line-height: 1;
    flex-shrink: 0;
}

.agt-predictor__title {
    font-family: var(--agt-font-display);
    font-size:   1.7rem;
    color:       var(--agt-green-dark);
    margin:      0 0 4px;
}

.agt-predictor__subtitle {
    color:    var(--agt-text-muted);
    margin:   0;
    font-size: 0.9rem;
}

.agt-predictor__body {
    display: grid;
    grid-template-columns: 360px 1fr;
    gap:     32px;
    align-items: start;
}

@media (max-width: 900px) {
    .agt-predictor__body {
        grid-template-columns: 1fr;
    }
}

/* Inputs panel */
.agt-predictor__inputs {
    background:    var(--agt-surface);
    border-radius: var(--agt-radius);
    padding:       24px;
    box-shadow:    var(--agt-shadow);
    position:      sticky;
    top:           20px;
}

.agt-input-grid {
    display:       flex;
    flex-direction: column;
    gap:           18px;
}

.agt-field-group {
    display:        flex;
    flex-direction: column;
    gap:            6px;
}

.agt-field-group--highlight {
    background:    var(--agt-green-light);
    padding:       12px;
    border-radius: 8px;
}

.agt-field-group label {
    font-weight: 600;
    font-size:   0.82rem;
    color:       var(--agt-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.agt-input-row {
    display:     flex;
    align-items: center;
    gap:         10px;
}

.agt-range {
    flex:         1;
    accent-color: var(--agt-green);
    cursor:       pointer;
    height:       5px;
}
.agt-range--green { accent-color: var(--agt-green); }
.agt-range--red   { accent-color: var(--agt-red); }

.agt-num-badge {
    display:       flex;
    align-items:   center;
    gap:           4px;
    background:    var(--agt-bg);
    border:        1px solid var(--agt-border);
    border-radius: 6px;
    padding:       4px 8px;
    min-width:     72px;
}

.agt-num-input {
    width:      44px;
    border:     none;
    background: transparent;
    font-size:  1rem;
    font-weight: 700;
    color:      var(--agt-green-dark);
    text-align: center;
    outline:    none;
    -moz-appearance: textfield;
}
.agt-num-input::-webkit-inner-spin-button,
.agt-num-input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }

.agt-unit {
    font-size:  0.8rem;
    color:      var(--agt-text-muted);
    font-weight: 500;
}

.agt-range-labels {
    display:         flex;
    justify-content: space-between;
    font-size:       0.74rem;
    color:           var(--agt-text-muted);
    margin-top:      2px;
}

/* Stage buttons */
.agt-stage-buttons {
    display: flex;
    gap:     8px;
}

.agt-stage-btn {
    flex:           1;
    display:        flex;
    flex-direction: column;
    align-items:    center;
    gap:            4px;
    padding:        10px 6px;
    border:         2px solid var(--agt-border);
    border-radius:  8px;
    background:     var(--agt-surface);
    cursor:         pointer;
    font-size:      0.78rem;
    font-weight:    600;
    color:          var(--agt-text-muted);
    transition:     all 0.2s;
}

.agt-stage-btn:hover {
    border-color: var(--agt-green);
    color:        var(--agt-green-dark);
}

.agt-stage-btn.active {
    background:   var(--agt-green-light);
    border-color: var(--agt-green);
    color:        var(--agt-green-dark);
}

.agt-stage-icon { font-size: 1.4rem; }

.agt-date-input {
    width:         100%;
    padding:       8px 10px;
    border:        1px solid var(--agt-border);
    border-radius: 6px;
    font-size:     0.95rem;
    color:         var(--agt-text);
    background:    var(--agt-surface);
    outline:       none;
}
.agt-date-input:focus { border-color: var(--agt-green); box-shadow: 0 0 0 3px rgba(39,174,96,0.12); }

/* Results panel */
.agt-predictor__results {
    background:    var(--agt-surface);
    border-radius: var(--agt-radius);
    padding:       24px;
    box-shadow:    var(--agt-shadow);
}

.agt-results-loading {
    display:         flex;
    align-items:     center;
    justify-content: center;
    gap:             12px;
    padding:         40px;
    color:           var(--agt-text-muted);
}

.agt-spinner {
    width:        24px;
    height:       24px;
    border:       3px solid var(--agt-border);
    border-top:   3px solid var(--agt-green);
    border-radius: 50%;
    animation:    agt-spin 0.7s linear infinite;
}
@keyframes agt-spin { to { transform: rotate(360deg); } }

/* Metrics row */
.agt-metrics-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    margin-bottom: 18px;
}

@media (max-width: 700px) {
    .agt-metrics-row { grid-template-columns: 1fr 1fr; }
}

.agt-metric-card {
    border-radius: 8px;
    padding:       16px;
    text-align:    center;
    border:        2px solid var(--agt-border);
}
.agt-metric-card--ndf  { border-color: #e74c3c; background: #fff5f5; }
.agt-metric-card--rfv  { border-color: var(--agt-blue); background: var(--agt-blue-light); }
.agt-metric-card--yard { border-color: #8e44ad; background: #f8f0fd; }
.agt-metric-card--cp   { border-color: var(--agt-green); background: var(--agt-green-light); }

.agt-metric-label {
    font-size:   0.74rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color:       var(--agt-text-muted);
    margin-bottom: 6px;
}

.agt-metric-value {
    font-family: var(--agt-font-display);
    font-size:   2rem;
    font-weight: 700;
    color:       var(--agt-text);
    line-height: 1;
}

.agt-metric-sub {
    font-size:  0.72rem;
    color:      var(--agt-text-muted);
    margin-top: 4px;
}

/* Grade + harvest row */
.agt-grade-row {
    display:     flex;
    gap:         12px;
    margin-bottom: 16px;
}

.agt-grade-badge,
.agt-harvest-badge {
    flex:          1;
    display:       flex;
    flex-direction: column;
    align-items:   center;
    padding:       14px;
    border-radius: 8px;
    border:        2px solid var(--agt-border);
    background:    var(--agt-surface);
    text-align:    center;
    transition:    border-color 0.3s;
}

.agt-grade-label,
.agt-harvest-label {
    font-size:    0.75rem;
    font-weight:  700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color:        var(--agt-text-muted);
    margin-bottom: 6px;
}

.agt-grade-value {
    font-family: var(--agt-font-display);
    font-size:   1.6rem;
    font-weight: 700;
    transition:  color 0.3s;
}

.agt-harvest-date {
    font-family: var(--agt-font-display);
    font-size:   1.3rem;
    font-weight: 700;
    color:       var(--agt-green-dark);
}

/* Recommendation banner */
.agt-recommendation {
    padding:       14px 18px;
    border-radius: 8px;
    margin-bottom: 16px;
    border-left:   5px solid var(--agt-border);
    transition:    all 0.3s;
}
.agt-recommendation--hidden { display: none; }
.agt-recommendation--red    { background: var(--agt-red-light);    border-color: var(--agt-red); }
.agt-recommendation--orange { background: var(--agt-orange-light); border-color: var(--agt-orange); }
.agt-recommendation--yellow { background: var(--agt-yellow-light); border-color: var(--agt-yellow); }
.agt-recommendation--green  { background: var(--agt-green-light);  border-color: var(--agt-green); }

.agt-rec-action  { font-weight: 800; font-size: 0.95rem; margin-bottom: 4px; }
.agt-rec-message { font-size: 0.87rem; line-height: 1.5; }

/* Harvest note (MFGA sourcing) */
.agt-harvest-note {
    font-size:     0.82rem;
    color:         var(--agt-text-muted);
    background:    var(--agt-blue-light);
    border-left:   3px solid var(--agt-blue);
    padding:       8px 12px;
    border-radius: 4px;
    margin-bottom: 14px;
    font-style:    italic;
}

/* Days away sub-label on harvest badge */
.agt-harvest-days {
    font-size:   0.82rem;
    font-weight: 600;
    margin-top:  4px;
}

/* Range hint below sliders */
.agt-range-hint {
    font-size:  0.74rem;
    color:      var(--agt-text-muted);
    margin-top: 3px;
    font-style: italic;
}

/* Grade description */
.agt-grade-desc {
    font-size:     0.85rem;
    color:         var(--agt-text-muted);
    background:    var(--agt-bg);
    padding:       10px 14px;
    border-radius: 6px;
    margin-bottom: 18px;
    font-style:    italic;
}

/* NDF Progress bar */
.agt-ndf-progress-wrapper {
    margin-bottom: 24px;
}

.agt-ndf-progress-label {
    display:         flex;
    justify-content: space-between;
    font-size:       0.82rem;
    font-weight:     600;
    color:           var(--agt-text-muted);
    margin-bottom:   6px;
}

.agt-progress-bar {
    height:        14px;
    background:    var(--agt-bg);
    border-radius: 7px;
    border:        1px solid var(--agt-border);
    position:      relative;
    overflow:      visible;
}

.agt-progress-fill {
    height:        100%;
    border-radius: 7px;
    transition:    width 0.5s ease, background 0.3s;
    min-width:     4px;
}

.agt-progress-target {
    position:   absolute;
    top:        -5px;
    bottom:     -5px;
    width:      2px;
    background: var(--agt-red);
    transform:  translateX(-50%);
}
.agt-progress-target::after {
    content:    '▼';
    position:   absolute;
    top:        -16px;
    left:       50%;
    transform:  translateX(-50%);
    color:      var(--agt-red);
    font-size:  10px;
}

.agt-progress-scale {
    display:         flex;
    justify-content: space-between;
    font-size:       0.72rem;
    color:           var(--agt-text-muted);
    margin-top:      4px;
}

/* Forecast chart */
.agt-forecast-section { margin-bottom: 24px; }

.agt-chart-wrapper {
    background:    var(--agt-surface);
    border-radius: 8px;
    border:        1px solid var(--agt-border);
    padding:       12px;
}

/* Use table */
.agt-use-table {
    width:           100%;
    border-collapse: collapse;
    font-size:       0.85rem;
}

.agt-use-table th {
    background:     var(--agt-bg);
    padding:        10px 12px;
    text-align:     left;
    font-size:      0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color:          var(--agt-text-muted);
    border-bottom:  2px solid var(--agt-border);
}

.agt-use-table td {
    padding:     10px 12px;
    border-bottom: 1px solid var(--agt-bg);
    vertical-align: middle;
}

.agt-grade-dot {
    display:       inline-block;
    width:         10px;
    height:        10px;
    border-radius: 50%;
    margin-right:  6px;
    vertical-align: middle;
}


/* ════════════════════════════════════════════════════════════════════════════
   DASHBOARD
═══════════════════════════════════════════════════════════════════════════ */

.agt-toolbar {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    margin-bottom:   24px;
}

.agt-dashboard__title {
    font-family:  var(--agt-font-display);
    font-size:    1.6rem;
    color:        var(--agt-green-dark);
    margin:       0;
}

/* Field tabs */
.agt-field-tabs {
    display:      flex;
    gap:          8px;
    margin-bottom: 24px;
    flex-wrap:    wrap;
}

.agt-field-tab {
    display:        flex;
    flex-direction: column;
    align-items:    flex-start;
    padding:        10px 16px;
    background:     var(--agt-surface);
    border:         2px solid var(--agt-border);
    border-radius:  8px;
    cursor:         pointer;
    transition:     all 0.2s;
    min-width:      120px;
}

.agt-field-tab:hover {
    border-color: var(--agt-green);
}

.agt-field-tab.active {
    background:   var(--agt-green-light);
    border-color: var(--agt-green);
}

.agt-tab-name {
    font-weight: 700;
    font-size:   0.95rem;
    color:       var(--agt-text);
}

.agt-tab-meta {
    font-size: 0.78rem;
    color:     var(--agt-text-muted);
    margin-top: 2px;
}

/* KPI row */
.agt-kpi-row {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap:     14px;
    margin-bottom: 20px;
}

@media (max-width: 900px) {
    .agt-kpi-row { grid-template-columns: repeat(2, 1fr); }
}

.agt-kpi {
    background:    var(--agt-surface);
    border-radius: var(--agt-radius);
    padding:       18px;
    text-align:    center;
    box-shadow:    var(--agt-shadow);
    border-top:    3px solid var(--agt-border);
    transition:    border-color 0.3s;
}

.agt-kpi--grade { border-top-color: var(--agt-green); }

.agt-kpi__label {
    font-size:      0.74rem;
    font-weight:    700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color:          var(--agt-text-muted);
    margin-bottom:  8px;
}

.agt-kpi__value {
    font-family:  var(--agt-font-display);
    font-size:    1.8rem;
    font-weight:  700;
    color:        var(--agt-text);
    line-height:  1;
}

.agt-kpi__sub {
    font-size:  0.72rem;
    color:      var(--agt-text-muted);
    margin-top: 4px;
}

/* Charts row */
.agt-charts-row {
    display:               grid;
    grid-template-columns: 1fr 1fr;
    gap:                   20px;
    margin-bottom:         24px;
}

@media (max-width: 800px) {
    .agt-charts-row { grid-template-columns: 1fr; }
}

.agt-chart-card {
    background:    var(--agt-surface);
    border-radius: var(--agt-radius);
    padding:       16px;
    box-shadow:    var(--agt-shadow);
}

.agt-chart-card__title {
    font-family:  var(--agt-font-display);
    font-size:    1rem;
    color:        var(--agt-green-dark);
    margin:       0 0 12px;
}

/* Obs form */
.agt-obs-form-section {
    background:    var(--agt-surface);
    border-radius: var(--agt-radius);
    padding:       24px;
    box-shadow:    var(--agt-shadow);
    margin-bottom: 24px;
}

.agt-form-grid {
    display:               grid;
    grid-template-columns: repeat(3, 1fr);
    gap:                   16px;
    margin-bottom:         16px;
}

@media (max-width: 700px) {
    .agt-form-grid { grid-template-columns: 1fr 1fr; }
}

.agt-form-field label {
    display:     block;
    font-size:   0.82rem;
    font-weight: 600;
    color:       var(--agt-text-muted);
    margin-bottom: 4px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.agt-form-field--full { grid-column: 1 / -1; }

.agt-input {
    width:         100%;
    padding:       9px 11px;
    border:        1px solid var(--agt-border);
    border-radius: 6px;
    font-size:     0.95rem;
    color:         var(--agt-text);
    background:    var(--agt-surface);
    outline:       none;
    transition:    border-color 0.2s, box-shadow 0.2s;
}

.agt-input:focus {
    border-color: var(--agt-green);
    box-shadow:   0 0 0 3px rgba(39,174,96,0.12);
}

.agt-textarea { resize: vertical; min-height: 60px; }

/* Obs table */
.agt-obs-table-section {
    background:    var(--agt-surface);
    border-radius: var(--agt-radius);
    padding:       24px;
    box-shadow:    var(--agt-shadow);
}

.agt-table-scroll { overflow-x: auto; }

.agt-table {
    width:           100%;
    border-collapse: collapse;
    font-size:       0.88rem;
}

.agt-table th {
    background:      var(--agt-bg);
    padding:         10px 14px;
    text-align:      left;
    font-size:       0.78rem;
    text-transform:  uppercase;
    letter-spacing:  0.04em;
    color:           var(--agt-text-muted);
    border-bottom:   2px solid var(--agt-border);
    white-space:     nowrap;
}

.agt-table td {
    padding:       10px 14px;
    border-bottom: 1px solid var(--agt-bg);
    vertical-align: middle;
}

.agt-table tr:hover td { background: var(--agt-bg); }
.agt-table-empty { color: var(--agt-text-muted); font-style: italic; text-align: center; padding: 24px; }

.agt-grade-pill {
    font-weight:   700;
    font-size:     0.8rem;
    border-radius: 4px;
    padding:       2px 6px;
    background:    rgba(0,0,0,0.04);
}

/* Empty state */
.agt-empty-state {
    text-align:    center;
    padding:       60px 20px;
    background:    var(--agt-surface);
    border-radius: var(--agt-radius);
    box-shadow:    var(--agt-shadow);
}

.agt-empty-icon { font-size: 3rem; margin-bottom: 12px; }
.agt-empty-state h3 { font-family: var(--agt-font-display); color: var(--agt-green-dark); margin: 0 0 8px; }
.agt-empty-state p  { color: var(--agt-text-muted); margin: 0 0 20px; }

/* Buttons */
.agt-btn {
    display:       inline-flex;
    align-items:   center;
    gap:           6px;
    padding:       10px 20px;
    border:        none;
    border-radius: 6px;
    font-size:     0.9rem;
    font-weight:   700;
    cursor:        pointer;
    transition:    all 0.2s;
    text-decoration: none;
    line-height:   1;
}

.agt-btn:disabled { opacity: 0.6; cursor: not-allowed; }

.agt-btn--primary {
    background: var(--agt-green);
    color:      white;
}
.agt-btn--primary:hover { background: var(--agt-green-dark); }

.agt-btn--secondary {
    background: var(--agt-surface);
    color:      var(--agt-text);
    border:     1px solid var(--agt-border);
}
.agt-btn--secondary:hover { border-color: var(--agt-green); color: var(--agt-green-dark); }

.agt-btn-icon {
    background:    none;
    border:        none;
    cursor:        pointer;
    font-size:     1.1rem;
    padding:       4px;
    border-radius: 4px;
    transition:    background 0.2s;
}
.agt-btn-icon:hover { background: var(--agt-red-light); }

/* Modal */
.agt-modal {
    position: fixed;
    inset:    0;
    z-index:  999;
    display:  flex;
    align-items: center;
    justify-content: center;
}

.agt-modal__backdrop {
    position:   absolute;
    inset:      0;
    background: rgba(0,0,0,0.45);
    backdrop-filter: blur(2px);
}

.agt-modal__box {
    position:      relative;
    background:    var(--agt-surface);
    border-radius: var(--agt-radius);
    padding:       28px;
    width:         min(620px, 96vw);
    box-shadow:    var(--agt-shadow-lg);
    max-height:    90vh;
    overflow-y:    auto;
}

.agt-modal__header {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    margin-bottom:   20px;
}

.agt-modal__header h3 {
    font-family: var(--agt-font-display);
    font-size:   1.2rem;
    color:       var(--agt-green-dark);
    margin:      0;
}

.agt-modal__close {
    background: none;
    border:     none;
    font-size:  1.2rem;
    cursor:     pointer;
    color:      var(--agt-text-muted);
    padding:    4px 8px;
    border-radius: 4px;
}
.agt-modal__close:hover { background: var(--agt-bg); }

.agt-modal__actions {
    display:         flex;
    justify-content: flex-end;
    gap:             10px;
    margin-top:      20px;
}

/* Alerts */
.agt-alert {
    padding:       11px 16px;
    border-radius: 6px;
    margin-bottom: 14px;
    font-size:     0.88rem;
    font-weight:   500;
}

.agt-alert--success {
    background: var(--agt-green-light);
    color:      var(--agt-green-dark);
    border:     1px solid #a5d6a7;
}

.agt-alert--error {
    background: var(--agt-red-light);
    color:      var(--agt-red);
    border:     1px solid #ef9a9a;
}

/* Responsive */
@media (max-width: 600px) {
    .agt-metrics-row { grid-template-columns: 1fr 1fr; }
    .agt-kpi-row     { grid-template-columns: 1fr 1fr; }
    .agt-grade-row   { flex-direction: column; }
    .agt-form-grid   { grid-template-columns: 1fr; }
}