/*
 * ═══════════════════════════════════════════════════════
 * ABIA GREEN — ENVIRONMENTAL SYSTEM STYLES
 * File: css/environment.css
 * Page: environment.html
 * ═══════════════════════════════════════════════════════
 */

/* ── PAGE ACCENT: Amber-Earth ────────────────────────── */
:root {
  --accent:      #C27A10;
  --accent-deep: #8F580A;
  --accent-glow: rgba(194, 122, 16, 0.18);
}
body { padding-top: var(--top-offset); }

/* ── MODULE MARKER ───────────────────────────────────── */
.module-marker { display: flex; align-items: center; gap: 12px; font-family: var(--font-mono); font-size: 9px; letter-spacing: .14em; text-transform: uppercase; color: var(--amber); margin-bottom: 20px; }
.module-marker::after          { content: ''; flex: 1; height: 1px; background: rgba(253,250,245,.08); }
.module-marker.on-light        { color: var(--amber-2); }
.module-marker.on-light::after { background: rgba(26,18,8,.08); }

/* ── LGA LEADERBOARD ─────────────────────────────────── */
.lga-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(155px,1fr)); gap: 12px; margin-top: 36px; }
.lga-card { padding: 16px 14px; background: rgba(253,250,245,.04); border: 1px solid rgba(253,250,245,.07); border-radius: var(--radius); text-align: center; transition: border-color .2s; }
.lga-card:hover { border-color: rgba(232,148,26,.3); }
.lga-rank  { font-family: var(--font-mono); font-size: 8.5px; letter-spacing: .1em; color: rgba(253,250,245,.28); margin-bottom: 7px; }
.lga-name  { font-family: var(--font-serif); font-size: .9rem; color: var(--white); margin-bottom: 7px; }
.lga-score { font-size: 1.4rem; font-family: var(--font-mono); font-weight: 700; }
.lga-bar   { height: 3px; background: rgba(253,250,245,.07); border-radius: 2px; margin-top: 7px; overflow: hidden; }
.lga-fill  { height: 100%; border-radius: 2px; background: var(--amber); }

/* ── FOREST COVER BARS ───────────────────────────────── */
.forest-split { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 36px; }
.fp           { padding: 24px 22px; border-radius: var(--radius); }
.fp.loss      { background: rgba(192,57,43,.07); border: 1px solid rgba(192,57,43,.18); }
.fp.gain      { background: rgba(26,107,60,.07);  border: 1px solid rgba(26,107,60,.18); }
.fp-label               { font-family: var(--font-mono); font-size: 9px; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 14px; }
.fp.loss .fp-label      { color: var(--red); }
.fp.gain .fp-label      { color: var(--forest); }
.fcb        { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; font-size: .78rem; }
.fcb-name   { width: 88px; flex-shrink: 0; color: var(--ash); font-size: .74rem; }
.fcb-track  { flex: 1; height: 7px; background: rgba(26,18,8,.08); border-radius: 4px; overflow: hidden; }
.fcb-fill   { height: 100%; border-radius: 4px; }
.fcb-fill.loss { background: var(--red); }
.fcb-fill.gain { background: var(--forest); }
.fcb-val    { width: 36px; text-align: right; font-family: var(--font-mono); font-size: .7rem; }

/* ── REPORT TYPE SELECTOR ────────────────────────────── */
.rt-types { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px,1fr)); gap: 13px; margin-bottom: 36px; }
.rt-card  { padding: 20px 18px; background: var(--white); border: 1px solid rgba(26,18,8,.08); border-radius: var(--radius); border-top: 3px solid var(--forest); cursor: pointer; transition: all .22s; }
.rt-card:hover, .rt-card.active { border-top-color: var(--amber); transform: translateY(-2px); box-shadow: 0 7px 22px rgba(26,18,8,.07); }
.rt-icon  { font-size: 22px; margin-bottom: 9px; }
.rt-name  { font-family: var(--font-serif); font-size: .9rem; color: var(--ink); margin-bottom: 4px; }
.rt-desc  { font-size: .75rem; color: var(--ash); line-height: 1.6; }

/* ── REPORT FORM ─────────────────────────────────────── */
.report-form-wrap  { background: var(--white); border: 1px solid rgba(26,18,8,.08); border-radius: var(--radius); overflow: hidden; box-shadow: 0 6px 32px rgba(26,18,8,.06); }
.rfh               { padding: 18px 26px; background: var(--forest); color: var(--white); display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; }
.rfh-title         { font-family: var(--font-serif); font-size: 1.08rem; }
.rfh-badge         { font-family: var(--font-mono); font-size: 8.5px; letter-spacing: .1em; text-transform: uppercase; background: rgba(255,255,255,.14); padding: 3px 10px; border-radius: 20px; }
.rfb               { padding: 26px; }
.form-row          { margin-bottom: 16px; }
.form-label        { display: block; font-family: var(--font-mono); font-size: 8.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--ash); margin-bottom: 6px; }
.form-input,
.form-select,
.form-textarea     { width: 100%; background: var(--cream); color: var(--ink); border: 1px solid rgba(26,18,8,.11); border-radius: var(--radius); padding: 9px 12px; font-family: var(--font-sans); font-size: .86rem; outline: none; transition: border-color .2s; }
.form-input:focus,
.form-select:focus,
.form-textarea:focus { border-color: var(--forest); }
.form-textarea     { resize: vertical; min-height: 76px; line-height: 1.6; }
.form-select       { appearance: none; cursor: pointer; }
.form-row-2        { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; }
.upload-zone       { border: 2px dashed rgba(26,18,8,.14); border-radius: var(--radius); padding: 24px; text-align: center; cursor: pointer; transition: border-color .2s, background .2s; }
.upload-zone:hover { border-color: var(--forest); background: rgba(26,107,60,.03); }
.upload-icon       { font-size: 26px; margin-bottom: 7px; }
.upload-text       { font-size: .8rem; color: var(--ash); line-height: 1.6; }
.upload-text strong { color: var(--forest); }
.upload-meta       { font-family: var(--font-mono); font-size: .7rem; color: var(--ash); margin-top: 4px; opacity: .65; }
.sev-row           { display: flex; gap: 7px; flex-wrap: wrap; }
.sev-opt           { position: relative; }
.sev-opt input     { position: absolute; opacity: 0; width: 0; height: 0; }
.sev-lbl           { display: inline-block; padding: 6px 14px; font-family: var(--font-mono); font-size: 8.5px; letter-spacing: .07em; text-transform: uppercase; border: 1px solid rgba(26,18,8,.11); border-radius: var(--radius); color: var(--ash); cursor: pointer; transition: all .2s; }
.sev-opt input:checked + .sev-lbl { border-color: var(--forest); color: var(--forest); background: rgba(26,107,60,.05); }
.form-submit       { width: 100%; padding: 13px; background: var(--forest); color: var(--white); font-size: 13px; font-weight: 600; border-radius: var(--radius); margin-top: 4px; transition: all .22s; }
.form-submit:hover { background: var(--deep); transform: translateY(-1px); }
.form-success      { display: none; padding: 28px; text-align: center; }
.fs-icon           { font-size: 34px; margin-bottom: 10px; }
.fs-title          { font-family: var(--font-serif); font-size: 1.15rem; color: var(--forest); margin-bottom: 7px; }
.fs-body           { font-size: .82rem; color: var(--ash); line-height: 1.7; }
.fs-id             { font-family: var(--font-mono); font-size: .76rem; color: var(--amber-2); margin-top: 9px; }
.fs-reset          { margin-top: 14px; padding: 9px 22px; border-radius: var(--radius); background: rgba(26,107,60,.1); color: var(--forest); font-weight: 600; font-size: 12px; }

/* ── PETITIONS ───────────────────────────────────────── */
.petition-card      { background: rgba(253,250,245,.04); border: 1px solid rgba(253,250,245,.08); border-radius: var(--radius); padding: 20px 22px; margin-bottom: 12px; transition: border-color .2s; }
.petition-card:hover { border-color: rgba(232,148,26,.3); }
.petition-title     { font-family: var(--font-serif); font-size: .96rem; color: var(--white); margin-bottom: 6px; }
.petition-meta      { font-size: .76rem; color: rgba(253,250,245,.38); font-family: var(--font-mono); margin-bottom: 12px; }
.petition-bar-wrap  { display: flex; align-items: center; gap: 10px; }
.petition-track     { flex: 1; height: 5px; background: rgba(253,250,245,.07); border-radius: 3px; overflow: hidden; }
.petition-fill      { height: 100%; border-radius: 3px; background: var(--amber); }
.petition-pct       { font-family: var(--font-mono); font-size: .76rem; color: var(--amber); width: 32px; text-align: right; }
.petition-sign      { margin-top: 10px; padding: 7px 14px; background: rgba(232,148,26,.1); color: var(--amber); font-size: 11px; font-weight: 600; border-radius: var(--radius); border: 1px solid rgba(232,148,26,.22); transition: all .2s; }
.petition-sign:hover { background: rgba(232,148,26,.2); }

/* ── PROGRESS TRACKER ────────────────────────────────── */
.prog-items   { display: flex; flex-direction: column; gap: 11px; margin-top: 14px; }
.prog-item    { display: flex; align-items: center; gap: 13px; padding: 12px 15px; background: rgba(253,250,245,.03); border: 1px solid rgba(253,250,245,.06); border-radius: var(--radius); }
.prog-icon    { font-size: 16px; flex-shrink: 0; }
.prog-name    { font-size: .83rem; color: rgba(253,250,245,.68); flex: 1; }
.prog-track   { width: 90px; height: 4px; background: rgba(253,250,245,.07); border-radius: 2px; overflow: hidden; flex-shrink: 0; }
.prog-fill    { height: 100%; border-radius: 2px; background: var(--amber); }
.prog-pct     { font-family: var(--font-mono); font-size: .73rem; color: var(--amber); width: 30px; text-align: right; flex-shrink: 0; }

/* ── FEEDBACK WALL ───────────────────────────────────── */
.feedback-wall  { display: flex; flex-direction: column; gap: 10px; }
.feedback-item  { padding: 14px 16px; background: rgba(253,250,245,.03); border: 1px solid rgba(253,250,245,.07); border-radius: var(--radius); }
.feedback-meta  { font-family: var(--font-mono); font-size: 8.5px; color: rgba(253,250,245,.28); margin-bottom: 6px; letter-spacing: .06em; }
.feedback-text  { font-size: .81rem; color: rgba(253,250,245,.55); line-height: 1.7; }

/* ── SENSOR DASHBOARD ────────────────────────────────── */
.sensor-grid  { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px,1fr)); gap: 13px; margin-top: 36px; }
.sensor-card  { background: rgba(253,250,245,.04); border: 1px solid rgba(253,250,245,.08); border-radius: var(--radius); padding: 20px 16px; text-align: center; }
.sensor-icon  { font-size: 22px; margin-bottom: 9px; }
.sensor-val   { font-family: var(--font-mono); font-size: 1.5rem; font-weight: 700; line-height: 1; margin-bottom: 4px; }
.sensor-lbl   { font-family: var(--font-mono); font-size: 8.5px; letter-spacing: .1em; text-transform: uppercase; color: rgba(253,250,245,.3); }
.sensor-loc   { font-size: .72rem; color: rgba(253,250,245,.4); margin-top: 4px; }
.s-good { color: #52C070; }
.s-warn { color: var(--amber); }
.s-crit { color: var(--red); }

/* ── RESPONSIVE ──────────────────────────────────────── */
@media (max-width: 680px) {
  .forest-split  { grid-template-columns: 1fr; }
  .form-row-2    { grid-template-columns: 1fr; }
}