
<style>
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:var(--font-sans)}
:root{
  --eigis-teal:#0F6E56;
  --eigis-teal-light:#E1F5EE;
  --eigis-teal-mid:#1D9E75;
  --eigis-amber:#BA7517;
  --eigis-amber-light:#FAEEDA;
}
.shell{display:grid;grid-template-columns:200px 1fr;min-height:680px;border:0.5px solid var(--color-border-tertiary);border-radius:var(--border-radius-lg);overflow:hidden;background:var(--color-background-primary)}
.sidebar{background:#085041;display:flex;flex-direction:column;padding:0}
.sidebar-header{padding:14px 16px 10px;border-bottom:0.5px solid rgba(255,255,255,0.12)}
.sidebar-logo{color:#9FE1CB;font-size:11px;letter-spacing:.08em;text-transform:uppercase;font-weight:500}
.sidebar-title{color:#fff;font-size:15px;font-weight:500;margin-top:3px;line-height:1.3}
.sidebar-subtitle{color:#5DCAA5;font-size:11px;margin-top:2px}
.nav-section-label{color:rgba(255,255,255,0.4);font-size:10px;text-transform:uppercase;letter-spacing:.1em;padding:14px 16px 5px}
.nav-item{display:flex;align-items:center;gap:8px;padding:7px 16px;cursor:pointer;color:rgba(255,255,255,0.7);font-size:12.5px;border-left:2.5px solid transparent;transition:all .15s}
.nav-item i{font-size:15px;flex-shrink:0}
.nav-item:hover{background:rgba(255,255,255,0.07);color:#fff}
.nav-item.active{background:rgba(29,158,117,0.25);color:#9FE1CB;border-left-color:#5DCAA5}
.nav-item.subactive{background:rgba(29,158,117,0.12);color:#fff;border-left-color:transparent}
.sidebar-footer{margin-top:auto;padding:12px 16px;border-top:0.5px solid rgba(255,255,255,0.1);color:rgba(255,255,255,0.4);font-size:10.5px}
.main{display:flex;flex-direction:column;overflow:hidden}
.topbar{display:flex;align-items:center;justify-content:space-between;padding:10px 20px;border-bottom:0.5px solid var(--color-border-tertiary);background:var(--color-background-primary);flex-shrink:0}
.topbar-left{display:flex;align-items:center;gap:10px}
.breadcrumb{font-size:12px;color:var(--color-text-secondary)}
.breadcrumb span{color:var(--color-text-primary);font-weight:500}
.topbar-actions{display:flex;gap:8px;align-items:center}
.btn{padding:6px 14px;font-size:12.5px;border:0.5px solid var(--color-border-secondary);border-radius:var(--border-radius-md);cursor:pointer;background:var(--color-background-primary);color:var(--color-text-primary);display:flex;align-items:center;gap:5px;font-family:var(--font-sans)}
.btn:hover{background:var(--color-background-secondary)}
.btn-primary{background:#085041;color:#fff;border-color:#085041}
.btn-primary:hover{background:#0F6E56}
.btn-success{background:#1D9E75;color:#fff;border-color:#1D9E75;font-size:12px}
.btn-success:hover{background:#0F6E56}
.status-badge{padding:3px 9px;border-radius:99px;font-size:11px;font-weight:500}
.status-new{background:#E1F5EE;color:#085041}
.status-saved{background:#C0DD97;color:#27500A}
.content-area{flex:1;overflow-y:auto;padding:16px 20px}
.form-section{background:var(--color-background-primary);border:0.5px solid var(--color-border-tertiary);border-radius:var(--border-radius-lg);margin-bottom:14px;overflow:hidden}
.section-header{display:flex;align-items:center;justify-content:space-between;padding:10px 16px;background:var(--color-background-secondary);cursor:pointer;user-select:none;border-bottom:0.5px solid var(--color-border-tertiary)}
.section-header-left{display:flex;align-items:center;gap:8px}
.section-tag{padding:2px 8px;border-radius:4px;font-size:10px;font-weight:500;letter-spacing:.04em}
.tag-a{background:#E1F5EE;color:#085041}
.tag-b{background:#E6F1FB;color:#185FA5}
.tag-c{background:#FAEEDA;color:#854F0B}
.tag-d{background:#FAECE7;color:#993C1D}
.tag-e{background:#EEEDFE;color:#3C3489}
.tag-f{background:#EAF3DE;color:#3B6D11}
.tag-g{background:#FBEAF0;color:#72243E}
.section-title{font-size:13px;font-weight:500;color:var(--color-text-primary)}
.section-body{padding:14px 16px;display:none}
.section-body.open{display:block}
.form-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:10px 14px;margin-bottom:10px}
.form-grid-3{grid-template-columns:repeat(3,1fr)}
.field-group{display:flex;flex-direction:column;gap:3px}
.field-label{font-size:11px;color:var(--color-text-secondary);font-weight:500;text-transform:uppercase;letter-spacing:.04em}
.field-label .required{color:#D85A30}
.field-input{font-size:13px;padding:6px 9px;border:0.5px solid var(--color-border-secondary);border-radius:var(--border-radius-md);background:var(--color-background-primary);color:var(--color-text-primary);font-family:var(--font-sans);width:100%}
.field-input:focus{outline:2px solid #1D9E75;outline-offset:1px;border-color:transparent}
.field-input[readonly]{background:var(--color-background-secondary);color:var(--color-text-secondary);cursor:default}
.field-input.auto{background:#E1F5EE;color:#085041;border-color:#9FE1CB}
.auto-label{font-size:10px;color:#0F6E56;margin-top:1px}
.gps-row{display:grid;grid-template-columns:1fr 1fr 1fr auto;gap:10px;align-items:end}
.btn-gps{padding:6px 12px;font-size:12px;background:#1D9E75;color:#fff;border:none;border-radius:var(--border-radius-md);cursor:pointer;white-space:nowrap;display:flex;align-items:center;gap:5px;font-family:var(--font-sans)}
.btn-gps:hover{background:#085041}
.divider{height:0.5px;background:var(--color-border-tertiary);margin:10px 0}
.sub-table{width:100%;border-collapse:collapse;font-size:12px;margin-bottom:8px}
.sub-table th{background:var(--color-background-secondary);padding:6px 8px;text-align:left;font-weight:500;color:var(--color-text-secondary);font-size:11px;border-bottom:0.5px solid var(--color-border-tertiary)}
.sub-table td{padding:4px 6px;border-bottom:0.5px solid var(--color-border-tertiary);vertical-align:middle}
.sub-table td input,.sub-table td select{width:100%;font-size:12px;padding:3px 5px;border:0.5px solid var(--color-border-tertiary);border-radius:4px;background:var(--color-background-primary);color:var(--color-text-primary);font-family:var(--font-sans)}
.sub-table td input:focus,.sub-table td select:focus{outline:1.5px solid #1D9E75}
.sub-table tr:last-child td{border-bottom:none}
.add-row-btn{font-size:12px;color:#0F6E56;background:none;border:0.5px dashed #5DCAA5;border-radius:var(--border-radius-md);padding:5px 12px;cursor:pointer;width:100%;font-family:var(--font-sans)}
.add-row-btn:hover{background:#E1F5EE}
.del-btn{padding:3px 6px;font-size:11px;color:var(--color-text-secondary);background:none;border:0.5px solid var(--color-border-tertiary);border-radius:4px;cursor:pointer;font-family:var(--font-sans)}
.del-btn:hover{color:#D85A30;border-color:#F0997B}
.textarea-field{resize:vertical;min-height:70px;font-family:var(--font-sans)}
.photo-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.photo-slot{border:0.5px dashed var(--color-border-secondary);border-radius:var(--border-radius-md);padding:14px 8px;text-align:center;cursor:pointer;transition:all .15s}
.photo-slot:hover{background:var(--color-background-secondary);border-color:#5DCAA5}
.photo-slot i{font-size:22px;color:var(--color-text-secondary);display:block;margin-bottom:4px}
.photo-slot span{font-size:11px;color:var(--color-text-secondary)}
.auto-fields-row{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;padding:10px;background:var(--color-background-secondary);border-radius:var(--border-radius-md);margin-bottom:10px}
.auto-field-item{display:flex;flex-direction:column;gap:2px}
.auto-field-key{font-size:10px;color:var(--color-text-secondary);text-transform:uppercase;letter-spacing:.05em}
.auto-field-val{font-size:12px;color:#085041;font-weight:500}
.bottom-bar{flex-shrink:0;padding:10px 20px;border-top:0.5px solid var(--color-border-tertiary);display:flex;align-items:center;justify-content:space-between;background:var(--color-background-primary)}
.progress-dots{display:flex;gap:5px;align-items:center}
.dot{width:7px;height:7px;border-radius:50%;background:var(--color-border-tertiary)}
.dot.filled{background:#1D9E75}
.dot.active{background:#085041;width:9px;height:9px}
.bottom-actions{display:flex;gap:8px}
.toast{position:fixed;bottom:20px;right:20px;background:#085041;color:#fff;padding:10px 16px;border-radius:var(--border-radius-md);font-size:13px;display:none;align-items:center;gap:8px;z-index:999;animation:fadeIn .2s}
@keyframes fadeIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
.info-pill{background:#E1F5EE;color:#085041;font-size:11px;padding:2px 8px;border-radius:99px;margin-left:6px}
.section-toggle{color:var(--color-text-secondary);font-size:13px;transition:transform .2s}
.section-toggle.open{transform:rotate(180deg)}
.rock-strength-bar{display:flex;gap:3px;margin-top:5px}
.rs-cell{flex:1;height:6px;border-radius:3px;background:var(--color-background-secondary)}
.rs-cell.active{background:#1D9E75}
.coord-status{display:flex;align-items:center;gap:5px;font-size:11px;color:#0F6E56;margin-top:3px}
.module-tabs{display:flex;gap:0;margin-bottom:14px;border:0.5px solid var(--color-border-tertiary);border-radius:var(--border-radius-md);overflow:hidden}
.mod-tab{padding:6px 12px;font-size:12px;cursor:pointer;color:var(--color-text-secondary);background:var(--color-background-secondary);border-right:0.5px solid var(--color-border-tertiary);flex:1;text-align:center}
.mod-tab:last-child{border-right:none}
.mod-tab.active{background:var(--color-background-primary);color:var(--color-text-primary);font-weight:500}
</style>

<h2 class="sr-only">EIGIS Engineering Geology & Geohazard Data Encoding Dashboard</h2>

<div class="shell">
  <div class="sidebar">
    <div class="sidebar-header">
      <div class="sidebar-logo">GIE · EIGIS</div>
      <div class="sidebar-title">Engineering Geology</div>
      <div class="sidebar-subtitle">Geohazard Module</div>
    </div>
    <div class="nav-section-label">Exposure Modules</div>
    <div class="nav-item active"><i class="ti ti-map-pin" aria-hidden="true"></i>Exposure Inventory</div>
    <div class="nav-item"><i class="ti ti-layers" aria-hidden="true"></i>Soil Profile Logging</div>
    <div class="nav-item"><i class="ti ti-mountain" aria-hidden="true"></i>Rock Exposure</div>
    <div class="nav-item"><i class="ti ti-vector-triangle" aria-hidden="true"></i>Discontinuity Mapping</div>
    <div class="nav-item"><i class="ti ti-triangle-square-circle" aria-hidden="true"></i>Slope Stability</div>
    <div class="nav-section-label">Advanced Modules</div>
    <div class="nav-item"><i class="ti ti-alert-triangle" aria-hidden="true"></i>Landslide Inventory</div>
    <div class="nav-item"><i class="ti ti-flask" aria-hidden="true"></i>Geotechnical Sampling</div>
    <div class="nav-item"><i class="ti ti-test-pipe" aria-hidden="true"></i>Laboratory Testing</div>
    <div class="nav-item"><i class="ti ti-radar" aria-hidden="true"></i>Geohazard Assessment</div>
    <div class="nav-section-label">Classification</div>
    <div class="nav-item"><i class="ti ti-chart-bar" aria-hidden="true"></i>Rock Mass (RMR/Q/GSI)</div>
    <div class="nav-section-label">Output</div>
    <div class="nav-item"><i class="ti ti-camera" aria-hidden="true"></i>Photo Documentation</div>
    <div class="nav-item"><i class="ti ti-report" aria-hidden="true"></i>Reporting</div>
    <div class="sidebar-footer">PostgreSQL · PostGIS · FastAPI</div>
  </div>

  <div class="main">
    <div class="topbar">
      <div class="topbar-left">
        <div class="breadcrumb">EIGIS / Eng. Geology / <span>New Exposure Record</span></div>
        <span class="status-badge status-new">Draft</span>
      </div>
      <div class="topbar-actions">
        <div class="info-pill"><i class="ti ti-database" aria-hidden="true" style="font-size:10px"></i> EXP-2026-0047</div>
        <button class="btn" onclick="sendPrompt('Explain the USCS soil classification system used in EIGIS')"><i class="ti ti-help-circle" aria-hidden="true"></i> Help</button>
        <button class="btn btn-primary" onclick="saveDraft()"><i class="ti ti-device-floppy" aria-hidden="true"></i> Save Draft</button>
      </div>
    </div>

    <div class="content-area" id="contentArea">

      <div class="auto-fields-row">
        <div class="auto-field-item"><div class="auto-field-key">Logger</div><div class="auto-field-val">T. Haile — GIE</div></div>
        <div class="auto-field-item"><div class="auto-field-key">Date / Time</div><div class="auto-field-val" id="autoDate">—</div></div>
        <div class="auto-field-item"><div class="auto-field-key">Administrative Unit</div><div class="auto-field-val">Auto · GIS Boundary</div></div>
        <div class="auto-field-item"><div class="auto-field-key">Watershed</div><div class="auto-field-val">Auto · DEM Layer</div></div>
        <div class="auto-field-item"><div class="auto-field-key">Geological Formation</div><div class="auto-field-val">Auto · Geo Map Layer</div></div>
        <div class="auto-field-item"><div class="auto-field-key">Landslide Inventory</div><div class="auto-field-val">Auto · Geohazard DB</div></div>
      </div>

      <div class="form-section">
        <div class="section-header" onclick="toggleSection('secA')">
          <div class="section-header-left">
            <span class="section-tag tag-a">A</span>
            <span class="section-title">Exposure Site Information</span>
          </div>
          <i class="ti ti-chevron-down section-toggle open" id="toggleSecA" aria-hidden="true"></i>
        </div>
        <div class="section-body open" id="secA">
          <div class="form-grid">
            <div class="field-group">
              <label class="field-label">Project <span class="required">*</span></label>
              <select class="field-input">
                <option>— Select Project —</option>
                <option>EIGIS-GIE-2026-001 · National Hazard Assessment</option>
                <option>EIGIS-GIE-2026-002 · Dam Site Investigation</option>
                <option>EIGIS-GIE-2026-003 · Road Corridor Study</option>
              </select>
            </div>
            <div class="field-group">
              <label class="field-label">Exposure Type <span class="required">*</span></label>
              <select class="field-input">
                <option>— Select Type —</option>
                <option>Test Pit</option>
                <option>Gully</option>
                <option>Slope Cut</option>
                <option>River Valley</option>
                <option>Landslide</option>
                <option>Quarry Face</option>
                <option>Road Cut</option>
                <option>Natural Exposure</option>
              </select>
            </div>
            <div class="field-group">
              <label class="field-label">Site ID <span class="required">*</span></label>
              <input class="field-input" placeholder="e.g. TP-001-A" type="text">
            </div>
            <div class="field-group">
              <label class="field-label">Weather Condition</label>
              <select class="field-input">
                <option>— Select —</option>
                <option>Sunny</option><option>Cloudy</option><option>Fair</option>
                <option>Bright</option><option>Drizzle</option><option>Slight Rain</option><option>Heavy Rain</option>
              </select>
            </div>
            <div class="field-group">
              <label class="field-label">Excavation Method</label>
              <select class="field-input">
                <option>Natural Exposure</option>
                <option>Hand Excavation</option>
                <option>Pneumatic Hammer</option>
                <option>Conventional Blasting</option>
              </select>
            </div>
            <div class="field-group">
              <label class="field-label">Accessibility</label>
              <select class="field-input">
                <option>Good</option><option>Fair</option><option>Poor</option>
              </select>
            </div>
          </div>
          <div class="form-grid" style="grid-template-columns:1fr 1fr 1fr">
            <div class="field-group">
              <label class="field-label">Exposure Length (m)</label>
              <input class="field-input" type="number" placeholder="0.0">
            </div>
            <div class="field-group">
              <label class="field-label">Exposure Height (m)</label>
              <input class="field-input" type="number" placeholder="0.0">
            </div>
            <div class="field-group">
              <label class="field-label">Groundwater Level (m)</label>
              <input class="field-input" type="number" placeholder="0.0">
            </div>
          </div>
          <div class="divider"></div>
          <label class="field-label" style="margin-bottom:6px;display:block">GPS Coordinates <span class="required">*</span></label>
          <div class="gps-row">
            <div class="field-group">
              <label class="field-label">Easting (m)</label>
              <input class="field-input auto" id="eastingField" type="number" placeholder="Auto · GPS" readonly>
            </div>
            <div class="field-group">
              <label class="field-label">Northing (m)</label>
              <input class="field-input auto" id="northingField" type="number" placeholder="Auto · GPS" readonly>
            </div>
            <div class="field-group">
              <label class="field-label">Elevation (m)</label>
              <input class="field-input auto" id="elevationField" type="number" placeholder="Auto · GPS" readonly>
            </div>
            <button class="btn-gps" onclick="captureGPS()"><i class="ti ti-current-location" aria-hidden="true"></i> Capture GPS</button>
          </div>
          <div class="coord-status" id="coordStatus" style="display:none"><i class="ti ti-circle-check" aria-hidden="true"></i> Coordinates captured · Asinara Basin, Amhara Region</div>
          <div class="divider"></div>
          <div class="field-group">
            <label class="field-label">Remarks</label>
            <textarea class="field-input textarea-field" placeholder="General site observations and notes…"></textarea>
          </div>
        </div>
      </div>

      <div class="form-section">
        <div class="section-header" onclick="toggleSection('secB')">
          <div class="section-header-left">
            <span class="section-tag tag-b">B</span>
            <span class="section-title">Soil Profile Logging</span>
          </div>
          <i class="ti ti-chevron-down section-toggle" id="toggleSecB" aria-hidden="true"></i>
        </div>
        <div class="section-body" id="secB">
          <table class="sub-table" id="soilTable">
            <thead>
              <tr>
                <th>Horizon</th><th>From (m)</th><th>To (m)</th><th>Color</th><th>Consistency</th><th>Moisture</th><th>Grain Size</th><th>Plasticity</th><th>USCS</th><th></th>
              </tr>
            </thead>
            <tbody id="soilBody">
              <tr>
                <td><input type="text" value="A" style="width:36px"></td>
                <td><input type="number" value="0.0" step="0.1"></td>
                <td><input type="number" value="0.5" step="0.1"></td>
                <td><select><option>Dark Brown</option><option>Brown</option><option>Reddish Brown</option><option>Yellow</option><option>Grey</option><option>Black</option></select></td>
                <td><select><option>Soft</option><option>Firm</option><option>Stiff</option><option>Very Stiff</option><option>Hard</option></select></td>
                <td><select><option>Dry</option><option>Slightly Moist</option><option>Moist</option><option>Wet</option></select></td>
                <td><select><option>Clay</option><option>Silt</option><option>Fine Sand</option><option>Medium Sand</option><option>Coarse Sand</option><option>Gravel</option></select></td>
                <td><select><option>Low (CL)</option><option>Medium (CI)</option><option>High (CH)</option><option>Non-plastic</option></select></td>
                <td><select><option>CL</option><option>CI</option><option>CH</option><option>SM</option><option>SC</option><option>SP</option><option>SW</option><option>GC</option><option>GM</option><option>GP</option><option>GW</option><option>ML</option><option>MH</option></select></td>
                <td><button class="del-btn" onclick="delRow(this)"><i class="ti ti-x" aria-hidden="true"></i></button></td>
              </tr>
            </tbody>
          </table>
          <button class="add-row-btn" onclick="addSoilRow()"><i class="ti ti-plus" aria-hidden="true" style="font-size:12px"></i> Add Horizon</button>
          <div class="divider"></div>
          <div class="form-grid" style="grid-template-columns:1fr 1fr">
            <div class="field-group">
              <label class="field-label">Dilatancy</label>
              <select class="field-input"><option>None</option><option>Slow</option><option>Rapid</option></select>
            </div>
            <div class="field-group">
              <label class="field-label">Sorting</label>
              <select class="field-input"><option>Well Sorted</option><option>Moderately Sorted</option><option>Poorly Sorted</option></select>
            </div>
          </div>
        </div>
      </div>

      <div class="form-section">
        <div class="section-header" onclick="toggleSection('secC')">
          <div class="section-header-left">
            <span class="section-tag tag-c">C</span>
            <span class="section-title">Rock Exposure Description</span>
          </div>
          <i class="ti ti-chevron-down section-toggle" id="toggleSecC" aria-hidden="true"></i>
        </div>
        <div class="section-body" id="secC">
          <div class="form-grid">
            <div class="field-group">
              <label class="field-label">Rock Name / Type</label>
              <select class="field-input">
                <option>— Select —</option>
                <option>Basalt</option><option>Granite</option><option>Rhyolite</option><option>Sandstone</option><option>Limestone</option><option>Shale</option><option>Tuff</option><option>Ignimbrite</option>
              </select>
            </div>
            <div class="field-group">
              <label class="field-label">Color</label>
              <select class="field-input">
                <option>Dark Grey</option><option>Light Grey</option><option>Brown</option><option>Reddish</option><option>Pink</option><option>White</option><option>Black</option>
              </select>
            </div>
            <div class="field-group">
              <label class="field-label">Grain Size</label>
              <select class="field-input">
                <option>Fine Grained</option><option>Medium Grained</option><option>Coarse Grained</option><option>Aphanitic</option><option>Porphyritic</option>
              </select>
            </div>
            <div class="field-group">
              <label class="field-label">Weathering Grade</label>
              <select class="field-input" onchange="updateWeatherBar(this)">
                <option value="1">I — Unweathered</option>
                <option value="2">II — Slightly Weathered</option>
                <option value="3" selected>III — Moderately Weathered</option>
                <option value="4">IV — Highly Weathered</option>
                <option value="5">V — Completely Weathered</option>
              </select>
            </div>
            <div class="field-group">
              <label class="field-label">Intact Rock Strength</label>
              <select class="field-input" onchange="updateStrengthBar(this)" id="rockStrengthSel">
                <option value="1">&lt;1.25 MPa — Very Weak</option>
                <option value="2">1.25–5 MPa — Weak</option>
                <option value="3">5–12.5 MPa — Mod. Weak</option>
                <option value="4" selected>12.5–50 MPa — Mod. Strong</option>
                <option value="5">50–100 MPa — Strong</option>
                <option value="6">100–200 MPa — Very Strong</option>
                <option value="7">&gt;200 MPa — Extremely Strong</option>
              </select>
              <div class="rock-strength-bar" id="strengthBar">
                <div class="rs-cell active"></div><div class="rs-cell active"></div><div class="rs-cell active"></div><div class="rs-cell active"></div><div class="rs-cell"></div><div class="rs-cell"></div><div class="rs-cell"></div>
              </div>
            </div>
            <div class="field-group">
              <label class="field-label">Structure / Texture</label>
              <select class="field-input">
                <option>Massive</option><option>Foliated</option><option>Vesicular</option><option>Amygdaloidal</option><option>Laminated</option><option>Bedded</option>
              </select>
            </div>
          </div>
          <div class="field-group">
            <label class="field-label">Rock Description</label>
            <textarea class="field-input textarea-field" placeholder="Detailed rock description including mineralogy, texture, structural features…"></textarea>
          </div>
        </div>
      </div>

      <div class="form-section">
        <div class="section-header" onclick="toggleSection('secD')">
          <div class="section-header-left">
            <span class="section-tag tag-d">D</span>
            <span class="section-title">Discontinuity Characterization</span>
          </div>
          <i class="ti ti-chevron-down section-toggle" id="toggleSecD" aria-hidden="true"></i>
        </div>
        <div class="section-body" id="secD">
          <table class="sub-table">
            <thead>
              <tr>
                <th>Set</th><th>Type</th><th>Dip Dir (°)</th><th>Dip (°)</th><th>Spacing (m)</th><th>Aperture (mm)</th><th>Roughness</th><th>Infill</th><th>Persistence (m)</th><th></th>
              </tr>
            </thead>
            <tbody id="discBody">
              <tr>
                <td><input type="text" value="J1" style="width:36px"></td>
                <td><select><option>Joint</option><option>Fault</option><option>Bedding</option><option>Foliation</option><option>Shear Zone</option><option>Tension Crack</option></select></td>
                <td><input type="number" placeholder="0–360" min="0" max="360" style="width:64px"></td>
                <td><input type="number" placeholder="0–90" min="0" max="90" style="width:54px"></td>
                <td><input type="number" placeholder="m" step="0.01" style="width:54px"></td>
                <td><input type="number" placeholder="mm" step="0.1" style="width:54px"></td>
                <td><select><option>Very Rough</option><option>Rough</option><option>Slightly Rough</option><option>Smooth</option><option>Slickensided</option></select></td>
                <td><select><option>None</option><option>Clay</option><option>Calcite</option><option>Quartz</option><option>Chlorite</option><option>Kaolin</option></select></td>
                <td><input type="number" placeholder="m" style="width:54px"></td>
                <td><button class="del-btn" onclick="delRow(this)"><i class="ti ti-x" aria-hidden="true"></i></button></td>
              </tr>
            </tbody>
          </table>
          <button class="add-row-btn" onclick="addDiscRow()"><i class="ti ti-plus" aria-hidden="true" style="font-size:12px"></i> Add Discontinuity Set</button>
          <div class="divider"></div>
          <div class="form-grid" style="grid-template-columns:1fr 1fr">
            <div class="field-group">
              <label class="field-label">Karst Features</label>
              <select class="field-input"><option>None</option><option>Minor Solution</option><option>Moderate Karst</option><option>Intense Karst</option></select>
            </div>
            <div class="field-group">
              <label class="field-label">Discontinuity Notes</label>
              <input class="field-input" type="text" placeholder="Additional observations…">
            </div>
          </div>
        </div>
      </div>

      <div class="form-section">
        <div class="section-header" onclick="toggleSection('secE')">
          <div class="section-header-left">
            <span class="section-tag tag-e">E</span>
            <span class="section-title">Slope Stability Assessment</span>
          </div>
          <i class="ti ti-chevron-down section-toggle" id="toggleSecE" aria-hidden="true"></i>
        </div>
        <div class="section-body" id="secE">
          <div class="form-grid">
            <div class="field-group">
              <label class="field-label">Existing Slope?</label>
              <select class="field-input"><option>Yes</option><option>No</option></select>
            </div>
            <div class="field-group">
              <label class="field-label">Slope Height (m)</label>
              <input class="field-input" type="number" placeholder="0.0">
            </div>
            <div class="field-group">
              <label class="field-label">Slope Angle (°)</label>
              <input class="field-input auto" placeholder="Auto · DEM" readonly>
            </div>
            <div class="field-group">
              <label class="field-label">Aspect (°)</label>
              <input class="field-input auto" placeholder="Auto · DEM" readonly>
            </div>
            <div class="field-group">
              <label class="field-label">Stability Condition</label>
              <select class="field-input">
                <option>Stable</option>
                <option>Small Problems</option>
                <option>Large Problems</option>
              </select>
            </div>
            <div class="field-group">
              <label class="field-label">Hazard Level</label>
              <select class="field-input">
                <option>Low</option><option>Moderate</option><option>High</option><option>Very High</option>
              </select>
            </div>
          </div>
          <div class="field-group">
            <label class="field-label">Recommended Actions / Mitigation Measures</label>
            <textarea class="field-input textarea-field" placeholder="Engineering recommendations, stabilization measures, monitoring requirements…"></textarea>
          </div>
        </div>
      </div>

      <div class="form-section">
        <div class="section-header" onclick="toggleSection('secF')">
          <div class="section-header-left">
            <span class="section-tag tag-f">F</span>
            <span class="section-title">Geotechnical Sampling</span>
          </div>
          <i class="ti ti-chevron-down section-toggle" id="toggleSecF" aria-hidden="true"></i>
        </div>
        <div class="section-body" id="secF">
          <table class="sub-table">
            <thead>
              <tr>
                <th>Sample No.</th><th>Depth (m)</th><th>Sample Type</th><th>Test Required</th><th>Horizon Ref.</th><th>Remarks</th><th></th>
              </tr>
            </thead>
            <tbody id="sampleBody">
              <tr>
                <td><input type="text" value="S-01" style="width:52px"></td>
                <td><input type="number" value="0.5" step="0.1" style="width:54px"></td>
                <td><select><option>Disturbed</option><option>Undisturbed</option><option>Bulk</option><option>Rock Core</option></select></td>
                <td><select><option>Atterberg Limits</option><option>Grain Size Analysis</option><option>Compaction</option><option>Shear Strength</option><option>UCS</option><option>Permeability</option></select></td>
                <td><input type="text" placeholder="A" style="width:40px"></td>
                <td><input type="text" placeholder="Notes…"></td>
                <td><button class="del-btn" onclick="delRow(this)"><i class="ti ti-x" aria-hidden="true"></i></button></td>
              </tr>
            </tbody>
          </table>
          <button class="add-row-btn" onclick="addSampleRow()"><i class="ti ti-plus" aria-hidden="true" style="font-size:12px"></i> Add Sample</button>
        </div>
      </div>

      <div class="form-section">
        <div class="section-header" onclick="toggleSection('secG')">
          <div class="section-header-left">
            <span class="section-tag tag-g">G</span>
            <span class="section-title">Photo Documentation</span>
          </div>
          <i class="ti ti-chevron-down section-toggle" id="toggleSecG" aria-hidden="true"></i>
        </div>
        <div class="section-body" id="secG">
          <div class="photo-grid">
            <div class="photo-slot"><i class="ti ti-camera" aria-hidden="true"></i><span>Exposure Overview</span></div>
            <div class="photo-slot"><i class="ti ti-photo" aria-hidden="true"></i><span>Slope Photo</span></div>
            <div class="photo-slot"><i class="ti ti-vector-triangle" aria-hidden="true"></i><span>Discontinuity Set</span></div>
            <div class="photo-slot"><i class="ti ti-flask" aria-hidden="true"></i><span>Sample Photo</span></div>
          </div>
          <p style="font-size:11px;color:var(--color-text-secondary);margin-top:10px">Photos are geotagged and linked to ExposureID. Storage: MinIO/S3. Max 10 MB per image.</p>
        </div>
      </div>

    </div>

    <div class="bottom-bar">
      <div style="display:flex;align-items:center;gap:10px">
        <div class="progress-dots">
          <div class="dot filled" title="Section A"></div>
          <div class="dot active" title="Section B"></div>
          <div class="dot" title="Section C"></div>
          <div class="dot" title="Section D"></div>
          <div class="dot" title="Section E"></div>
          <div class="dot" title="Section F"></div>
          <div class="dot" title="Section G"></div>
        </div>
        <span style="font-size:11px;color:var(--color-text-secondary)">2 of 7 sections complete</span>
      </div>
      <div class="bottom-actions">
        <button class="btn" onclick="sendPrompt('Explain the Rock Mass Rating (RMR) classification system and how it integrates with EIGIS discontinuity data')"><i class="ti ti-chart-bar" aria-hidden="true"></i> RMR/Q/GSI ↗</button>
        <button class="btn btn-success" onclick="submitRecord()"><i class="ti ti-send" aria-hidden="true"></i> Submit Record</button>
      </div>
    </div>
  </div>
</div>

<div class="toast" id="toast"><i class="ti ti-circle-check" aria-hidden="true"></i> <span id="toastMsg"></span></div>

<script>
function toggleSection(id){
  var body=document.getElementById(id);
  var toggle=document.getElementById('toggleSec'+id.replace('sec',''));
  var isOpen=body.classList.contains('open');
  body.classList.toggle('open',!isOpen);
  toggle.classList.toggle('open',!isOpen);
}

function now(){
  var d=new Date();
  var pad=function(n){return n.toString().padStart(2,'0')};
  return d.getFullYear()+'-'+pad(d.getMonth()+1)+'-'+pad(d.getDate())+' '+pad(d.getHours())+':'+pad(d.getMinutes());
}
document.getElementById('autoDate').textContent=now();

function captureGPS(){
  document.getElementById('eastingField').value='378452';
  document.getElementById('northingField').value='1198304';
  document.getElementById('elevationField').value='2134';
  document.getElementById('coordStatus').style.display='flex';
  showToast('GPS coordinates captured · UTM Zone 37N');
}

function updateStrengthBar(sel){
  var v=parseInt(sel.value);
  var cells=document.querySelectorAll('#strengthBar .rs-cell');
  cells.forEach(function(c,i){c.classList.toggle('active',i<v)});
}

function updateWeatherBar(sel){}

function addSoilRow(){
  var letters=['A','B','C','D','E','F','G','H'];
  var tbody=document.getElementById('soilBody');
  var n=tbody.rows.length;
  var row=document.createElement('tr');
  row.innerHTML='<td><input type="text" value="'+letters[Math.min(n,7)]+'" style="width:36px"></td><td><input type="number" value="'+(n*0.5).toFixed(1)+'" step="0.1"></td><td><input type="number" value="'+((n+1)*0.5).toFixed(1)+'" step="0.1"></td><td><select><option>Dark Brown</option><option>Brown</option><option>Reddish Brown</option><option>Yellow</option><option>Grey</option><option>Black</option></select></td><td><select><option>Soft</option><option>Firm</option><option>Stiff</option><option>Very Stiff</option><option>Hard</option></select></td><td><select><option>Dry</option><option>Slightly Moist</option><option>Moist</option><option>Wet</option></select></td><td><select><option>Clay</option><option>Silt</option><option>Fine Sand</option><option>Medium Sand</option><option>Coarse Sand</option><option>Gravel</option></select></td><td><select><option>Low (CL)</option><option>Medium (CI)</option><option>High (CH)</option><option>Non-plastic</option></select></td><td><select><option>CL</option><option>CI</option><option>CH</option><option>SM</option><option>SC</option><option>SP</option><option>SW</option><option>GC</option><option>GM</option></select></td><td><button class="del-btn" onclick="delRow(this)"><i class="ti ti-x"></i></button></td>';
  tbody.appendChild(row);
}

function addDiscRow(){
  var tbody=document.getElementById('discBody');
  var n=tbody.rows.length+1;
  var label='J'+n;
  var row=document.createElement('tr');
  row.innerHTML='<td><input type="text" value="'+label+'" style="width:36px"></td><td><select><option>Joint</option><option>Fault</option><option>Bedding</option><option>Foliation</option><option>Shear Zone</option><option>Tension Crack</option></select></td><td><input type="number" placeholder="0–360" min="0" max="360" style="width:64px"></td><td><input type="number" placeholder="0–90" min="0" max="90" style="width:54px"></td><td><input type="number" placeholder="m" step="0.01" style="width:54px"></td><td><input type="number" placeholder="mm" step="0.1" style="width:54px"></td><td><select><option>Very Rough</option><option>Rough</option><option>Slightly Rough</option><option>Smooth</option><option>Slickensided</option></select></td><td><select><option>None</option><option>Clay</option><option>Calcite</option><option>Quartz</option><option>Chlorite</option></select></td><td><input type="number" placeholder="m" style="width:54px"></td><td><button class="del-btn" onclick="delRow(this)"><i class="ti ti-x"></i></button></td>';
  tbody.appendChild(row);
}

function addSampleRow(){
  var tbody=document.getElementById('sampleBody');
  var n=tbody.rows.length+1;
  var row=document.createElement('tr');
  row.innerHTML='<td><input type="text" value="S-0'+n+'" style="width:52px"></td><td><input type="number" value="'+(n*0.5).toFixed(1)+'" step="0.1" style="width:54px"></td><td><select><option>Disturbed</option><option>Undisturbed</option><option>Bulk</option><option>Rock Core</option></select></td><td><select><option>Atterberg Limits</option><option>Grain Size Analysis</option><option>Compaction</option><option>Shear Strength</option><option>UCS</option><option>Permeability</option></select></td><td><input type="text" placeholder="A" style="width:40px"></td><td><input type="text" placeholder="Notes…"></td><td><button class="del-btn" onclick="delRow(this)"><i class="ti ti-x"></i></button></td>';
  tbody.appendChild(row);
}

function delRow(btn){btn.closest('tr').remove();}

function showToast(msg){
  var t=document.getElementById('toast');
  document.getElementById('toastMsg').textContent=msg;
  t.style.display='flex';
  setTimeout(function(){t.style.display='none'},2800);
}

function saveDraft(){showToast('Draft saved · EXP-2026-0047');}

function submitRecord(){showToast('Record submitted to PostgreSQL · PostGIS geometry written');}
</script>
