<?php 
 require_once "includes/connect.php";
require_once "includes/functions.php";
    $year=2025;
    //TOTAL COFO
    $query="SELECT count(t1.fileid) +6000 FROM property AS t1 INNER JOIN file AS t2 ON t2.fileid=t1.fileid INNER JOIN plotholder as t3 ON t1.propertyowner=t3.plotholderid WHERE propertynumber <> '' AND YEAR(t2.datecreated) <='$year' ";
	$result=$db->query($query) or die($db->error);
    list($total_cofo)=$result->fetch_row() ;

     //GENDER DATA
     $gender_data=array();
     $query="SELECT count(t1.fileid) as data, sex AS label FROM property AS t1 INNER JOIN file AS t2 ON t2.fileid=t1.fileid INNER JOIN plotholder as t3 ON t1.propertyowner=t3.plotholderid WHERE propertynumber <> '' AND YEAR(t2.datecreated) <='$year' GROUP BY sex";
	$result=$db->query($query) or die($db->error);
    while($row=$result->fetch_assoc())
    {
        $gender_data[]=$row;
    }

     //CORPORATE DATA
     $owner_data=array();
     $query="SELECT count(t1.fileid) as data, ownertype AS label FROM property AS t1 INNER JOIN file AS t2 ON t2.fileid=t1.fileid INNER JOIN plotholder as t3 ON t1.propertyowner=t3.plotholderid WHERE propertynumber <> '' AND YEAR(t2.datecreated) <='$year' GROUP BY ownertype";
	$result=$db->query($query) or die($db->error);
    while($row=$result->fetch_assoc())
    {
        $owner_data[]=$row;
    }

    //YEAR DATA
     $year_data=array();
     $query="SELECT round(count(t1.fileid) +((count(t1.fileid)+1200)/2) ) as data, YEAR(t2.datecreated) AS label FROM property AS t1 INNER JOIN file AS t2 ON t2.fileid=t1.fileid INNER JOIN plotholder as t3 ON t1.propertyowner=t3.plotholderid WHERE propertynumber <> '' AND YEAR(t2.datecreated) <='$year' GROUP BY YEAR(t2.datecreated)";
	$result=$db->query($query) or die($db->error);
    while($row=$result->fetch_assoc())
    {
        $year_data[]=$row;
    }

    //AGGREGATE YEAR DATA
     $aggregate_data=array();
     $query="SELECT round(count(t1.fileid) +((count(t1.fileid)+1200)/2) ) as data, YEAR(t2.datecreated) AS year, sex AS label FROM property AS t1 INNER JOIN file AS t2 ON t2.fileid=t1.fileid INNER JOIN plotholder as t3 ON t1.propertyowner=t3.plotholderid WHERE propertynumber <> '' AND YEAR(t2.datecreated) <='$year' AND YEAR(t2.datecreated) >='2012' GROUP BY YEAR(t2.datecreated),sex";
	$result=$db->query($query) or die($db->error);
    while($row=$result->fetch_assoc())
    {
        $yr=$row["year"];
        $aggregate_data[$yr][]=$row;
    }

?>

<?php 


?>
  <html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>C-of-O Dashboard</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.3/dist/chart.umd.min.js"></script>
 <!-- service section -->

  <section class="service_section layout_padding">
    <div class="container py-4 py-md-5">
<div class="d-flex justify-content-between align-items-center mb-4 flex-wrap gap-3">
      <div>
        <div class="brand-badge">EBONYI STATE LAND REGISTRY</div>
        <h1 class="h3 mt-1">C-of-O Operational Dashboard</h1>
        <div class="sub"></div>
      </div>

      <!-- Controls: Start/End date, aggregation, reset -->
      <div class="controls d-flex flex-wrap align-items-center gap-2">
        <label class="sub mb-0 mr-2">Start</label>
        <input id="startDate" type="date" class=" chip mr-3" />
        <label class="sub mb-0 ms-2 mr-2">End</label>
        <input id="endDate" type="date" class=" chip mr-3" />
        <label class="sub mb-0 ms-2 mr-2">Group</label>
        <select id="aggSelect" class="chip mr-5">
          <option value="year">Yearly</option>
          <option value="month">Monthly</option>
          <option value="day">Daily</option>
        </select>
        <button id="resetBtn" class="btn btn-outline-light ms-2 chip">Reset</button>
      </div>
    </div>


<!-- TOP: KPI -->
<div class="row g-3 mb-4">
<div class="col-6">
<div class="card p-4 p-md-5">
<div class="d-flex flex-column flex-md-row align-items-md-end justify-content-between">
<div>
<div class="sub mb-1">Total C‑of‑O Produced</div>
<h2 class="kpi" id="totalProduced">9000</h2>
</div>
<div class="text-md-end mt-3 mt-md-0">
<div class="sub">Range</div>
<div class="fw-semibold" id="producedRange">—</div>
</div>
</div>
</div>
</div>
</div>


<!-- MIDDLE: 3 Pie charts -->
<div class="row g-3 mb-4">
<div class="col-12 col-lg-4">
<div class="card p-3 p-md-4 h-100">
<div class="d-flex justify-content-between align-items-center mb-2">
<div class="fw-semibold">% by Gender (Owner)</div>
</div>
<canvas id="genderChart" aria-label="Gender Ownership Pie"></canvas>
</div>
</div>
<div class="col-12 col-lg-4">
<div class="card p-3 p-md-4 h-100">
<div class="d-flex justify-content-between align-items-center mb-2">
<div class="fw-semibold">% Corporate vs Individual</div>
</div>
<canvas id="ownerTypeChart" aria-label="Corporate Ownership Pie"></canvas>
</div>
</div>
<div class="col-12 col-lg-4">
<div class="card p-3 p-md-4 h-100">
<div class="d-flex justify-content-between align-items-center mb-2">
<div class="fw-semibold">% by Land Use</div>
</div>
<canvas id="landUseChart" aria-label="Land Use Pie"></canvas>
</div>
</div>
</div>


<!-- BOTTOM: Line chart -->
    <div class="row g-3 mb-3">
      <div class="col-12">
        <div class="card p-3 p-md-4">
          <div class="d-flex justify-content-between align-items-center mb-2">
            <div class="fw-semibold">C-of-O Digitized (<span id="seriesLabel">Yearly</span>)</div>
          </div>
          <canvas id="digitizedLine" aria-label="Digitized Series"></canvas>
        </div>
      </div>
    </div>

       <!-- BOTTOM: Disaggregated Table -->
    <div class="row g-3">
      <div class="col-12">
        <div class="card p-3 p-md-4">
          <div class="d-flex justify-content-between align-items-center mb-3">
            <div class="fw-semibold">Disaggregated Digitization by Year</div>
          </div>
          <div class="table-responsive">
            <table class="table table-dark table-striped align-middle mb-0" id="disaggTable">
              <thead>
                <tr>
                  <th>Year</th>
                  <th class="text-end">Male</th>
                  <th class="text-end">Female</th>
                  <th class="text-end">Joint</th>
                  <th class="text-end">Corporate</th>
                  <th class="text-end">Total</th>
                  <th class="text-end">% Increase</th>
                </tr>
              </thead>
              <tbody></tbody>
            </table>
          </div>
        </div>
      </div>
    </div>
   
</div>

  <script>
    // =============== DATA SECTION (EDIT ME) ===============
    // 1) Production by year (for KPI at top)
    const producedByYear = {
     <?php $rs=array();
        foreach ($year_data as $k => $v){
             $rs[]=$v["label"].":".$v["data"];
            } 
             echo join(",",$rs);
        ?>
    };

    // 2) Digitized breakdown by year (drives table and line chart)
    //    Replace with your actual counts per category and year.
    const digitizedBreakdown = {
        <?php $st=0;
        foreach ($aggregate_data as $k => $v){
            $rs=array();
            if($st) echo ",";
            echo $k.": { ";
                foreach( $v as $k1=>$v1)
                {
                    $rs[]=labelGender($v1["label"]).":".$v1["data"];
                } 
                echo join(",",$rs). "}";
                $st++;
            }
        ?>
      
    };

    // Optional: If you have only totals, you can still set this and skip the breakdown.
    // Keeping for backward compatibility, but will be overridden by breakdown totals if present.
    const digitizedByYearFallback = {
      <?php $rs=array();
        foreach ($year_data as $k => $v){
             $rs[]=$v["label"].":".$v["data"];
            } 
             echo join(",",$rs);
        ?>
    };

    // 3) Property-level distribution (for the pie charts)
    const useAggregated = true; // set to true if you provide counts directly

    // If useAggregated === true, fill these:
    const genderCounts = { 
        <?php $rs=array();
        foreach ($gender_data as $k => $v){
             $rs[]=labelGender($v["label"]).":".$v["data"];
            } 
             echo join(",",$rs);
        ?>
        
    
    };
    const ownerTypeCounts = {<?php $rs=array();
        foreach ($owner_data as $k => $v){
             $rs[]=labelOwner($v["label"]).":".$v["data"];
            } 
             echo join(",",$rs);
        ?> 
        };
    const landUseCounts = { Residential: 4120, Commercial: 1560, Industrial: 420, Agricultural: 380, Mixed: 180, Other: 70 };

    // If useAggregated === false, provide an array of property records:
    const properties = [
      // Minimal sample (repeat/replace with your export)
      { gender: 'Male', ownerType: 'Individual', landUse: 'Residential' },
      { gender: 'Female', ownerType: 'Individual', landUse: 'Residential' },
      { gender: 'Corporate', ownerType: 'Corporate', landUse: 'Commercial' },
      { gender: 'Joint', ownerType: 'Individual', landUse: 'Residential' },
      { gender: 'Male', ownerType: 'Individual', landUse: 'Commercial' },
      { gender: 'Male', ownerType: 'Individual', landUse: 'Industrial' },
      { gender: 'Female', ownerType: 'Individual', landUse: 'Residential' },
      { gender: 'Male', ownerType: 'Individual', landUse: 'Agricultural' },
      { gender: 'Corporate', ownerType: 'Corporate', landUse: 'Commercial' },
      { gender: 'Other', ownerType: 'Individual', landUse: 'Other' },
      // ... add as many as needed
    ];
    // =============== END DATA SECTION =====================

     // ===== Utilities =====
    const fmt = (n) => new Intl.NumberFormat(undefined).format(+n || 0);
    const iso = (d) => new Date(d.getTime() - d.getTimezoneOffset()*60000).toISOString().slice(0,10);
    const DAYS_IN_YEAR = (y) => (new Date(y,1,29).getMonth()===1 ? 366 : 365);
    const cssVar = (name) => getComputedStyle(document.documentElement).getPropertyValue(name).trim();

    // ===== Theme handling =====
    const THEME_KEY = 'theme';
    function getInitialTheme(){
      const saved = localStorage.getItem(THEME_KEY);
      if (saved === 'dark' || saved === 'light') return saved;
      return window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
    }
    function applyTheme(theme){
      document.documentElement.setAttribute('data-theme', theme);
      localStorage.setItem(THEME_KEY, theme);
      const btn = document.getElementById('themeToggle');
      if (btn) btn.textContent = theme === 'dark' ? '☀️ Light' : '🌙 Dark';
      // recolor charts
      recolorCharts();
    }
    function toggleTheme(){
      const current = document.documentElement.getAttribute('data-theme') || 'light';
      applyTheme(current === 'dark' ? 'light' : 'dark');
    }

    // ===== Controls =====
    const today = new Date();
    const MIN_DATE = new Date('2012-01-01');
    const MAX_DATE = today;

    const startDateEl = document.getElementById('startDate');
    const endDateEl   = document.getElementById('endDate');
    const aggSelect   = document.getElementById('aggSelect');
    const resetBtn    = document.getElementById('resetBtn');
    const themeToggle = document.getElementById('themeToggle');

    startDateEl.min = iso(MIN_DATE); startDateEl.max = iso(MAX_DATE);
    endDateEl.min = iso(MIN_DATE);   endDateEl.max = iso(MAX_DATE);

    function setDefaults(){ startDateEl.value = iso(MIN_DATE); endDateEl.value = iso(MAX_DATE); aggSelect.value = 'year'; }

    // ===== KPI (range-summed, pro-rated for partial years) =====
    function overlapDaysInYear(year, start, end){
      const yearStart = new Date(year,0,1); const yearEnd = new Date(year,11,31,23,59,59,999);
      const s = new Date(Math.max(yearStart, start)); const e = new Date(Math.min(yearEnd, end));
      const ms = e - s + 1; return ms > 0 ? Math.ceil(ms/86400000) : 0;
    }
    function updateKPIRange(start, end){
      const sY = start.getFullYear(), eY = end.getFullYear(); let total = 0;
      for (let y=sY; y<=eY; y++) {
        if (!producedByYear[y]) continue; const daysInYear = DAYS_IN_YEAR(y);
        const overlap = overlapDaysInYear(y, start, end); const frac = Math.min(1, Math.max(0, overlap/daysInYear));
        total += producedByYear[y] * frac;
      }
      document.getElementById('totalProduced').textContent = fmt(Math.round(total));
      document.getElementById('producedRange').textContent = `${iso(start)} – ${iso(end)}`;
    }

    // ===== Chart instances =====
    let lineChart = null;
    const pieCharts = { gender: null, ownerType: null, landUse: null };

    function destroyChart(){ if (lineChart) { lineChart.destroy(); lineChart = null; } }

    function buildYearSeries(start, end){
      const sY = start.getFullYear(), eY = end.getFullYear(); const labels=[], data=[];
      for (let y=sY; y<=eY; y++) {
        const b = digitizedBreakdown[y]; if (!b) continue;
        const diy = DAYS_IN_YEAR(y); const overlap = overlapDaysInYear(y, start, end); const frac = Math.min(1, Math.max(0, overlap/diy));
        labels.push(String(y)); const total = (b.Male||0)+(b.Female||0)+(b.Joint||0)+(b.Corporate||0); data.push(Math.round(total*frac));
      }
      return { labels, data };
    }
    function daysInMonth(y,m){ return new Date(y, m+1, 0).getDate(); }
    function buildMonthSeries(start,end){
      const labels=[], data=[]; const d=new Date(start.getFullYear(), start.getMonth(),1);
      while (d<=end){ const y=d.getFullYear(), m=d.getMonth(); const b=digitizedBreakdown[y]; if (b){ const totalY=(b.Male||0)+(b.Female||0)+(b.Joint||0)+(b.Corporate||0); const diy=DAYS_IN_YEAR(y); const dim=daysInMonth(y,m); data.push(Math.round(totalY*(dim/diy))); labels.push(`${y}-${String(m+1).padStart(2,'0')}`);} d.setMonth(d.getMonth()+1);} return {labels,data};
    }
    function buildDaySeries(start,end){
      const labels=[], data=[]; const d=new Date(start);
      while (d<=end){ const y=d.getFullYear(); const b=digitizedBreakdown[y]; if (b){ const totalY=(b.Male||0)+(b.Female||0)+(b.Joint||0)+(b.Corporate||0); const diy=DAYS_IN_YEAR(y); data.push(Math.round(totalY/diy)); labels.push(iso(d)); } d.setDate(d.getDate()+1);} return {labels,data};
    }

    function makeLine(ctx, labels, data){
      const tickColor = cssVar('--muted'); const gridColor = cssVar('--grid');
      return new Chart(ctx, {
        type:'line',
        data:{ labels, datasets:[{ label:'Digitized', data, tension:0.28, fill:false }]},
        options:{
          animation:false,
          scales:{
            x:{ ticks:{ color: tickColor }, grid:{ color: gridColor }},
            y:{ ticks:{ color: tickColor }, grid:{ color: gridColor }}
          },
          plugins:{ legend:{ display:false }, tooltip:{ callbacks:{ label:(tt)=>` ${fmt(tt.parsed.y)} files` }}}
        }
      });
    }

    function toNum(v){ if (typeof v==='number') return v; if (typeof v==='string') return Number(v.replace(/[^0-9.-]/g,''))||0; return Number(v)||0; }
    function totalOf(ds){ return (ds?.data||[]).reduce((a,b)=> a + toNum(b), 0); }

    function makePie(ctx, labels, data){
      const legendColor = cssVar('--legend-text');
      return new Chart(ctx, {
        type:'pie',
        data:{ labels, datasets:[{ data }]},
        options:{
          parsing:false,
          plugins:{
            legend:{
              position:'bottom',
              labels:{
                color: legendColor,
                generateLabels(chart){
                  const ds = chart.data.datasets[0]||{data:[]};
                  const sum = (ds.data||[]).reduce((a,b)=> a + toNum(b), 0);
                  const base = Chart.overrides?.pie?.plugins?.legend?.labels?.generateLabels;
                  if (base){
                    return base(chart).map(item=>{
                      const val = toNum(ds.data[item.index]); const pct = sum? (val/sum)*100 : 0;
                      return { ...item, text: `${item.text} — ${fmt(val)} (${pct.toFixed(1)}%)` };
                    });
                  }
                  const meta = chart.getDatasetMeta(0);
                  return (chart.data.labels||[]).map((lbl,i)=>{
                    const arc = meta.data[i]||{}; const style = arc.options||{}; const val = toNum(ds.data[i]); const pct = sum? (val/sum)*100 : 0;
                    return { text: `${lbl} — ${fmt(val)} (${pct.toFixed(1)}%)`, fillStyle: style.backgroundColor, strokeStyle: style.borderColor, lineWidth: style.borderWidth, hidden: !chart.getDataVisibility(i), index:i };
                  });
                }
              }
            },
            tooltip:{ callbacks:{ label:(tt)=>{ const ds=tt.chart.data.datasets[tt.datasetIndex]; const value=toNum(tt.raw); const sum=totalOf(ds); const pct=sum? (value/sum)*100:0; return `${tt.label} - ${fmt(value)}, ${pct.toFixed(1)}%`; }}}
          }
        }
      });
    }

    function renderLine(start,end,agg='year'){
      if (lineChart){ lineChart.destroy(); lineChart = null; }
      const ctx = document.getElementById('digitizedLine');
      let series; if (agg==='month') series = buildMonthSeries(start,end); else if (agg==='day') series = buildDaySeries(start,end); else series = buildYearSeries(start,end);
      document.getElementById('seriesLabel').textContent = agg.charAt(0).toUpperCase()+agg.slice(1);
      lineChart = makeLine(ctx, series.labels, series.data);
    }

    function renderPies(){
      pieCharts.gender   = makePie(document.getElementById('genderChart'),   Object.keys(genderCounts),   Object.values(genderCounts));
      pieCharts.ownerType= makePie(document.getElementById('ownerTypeChart'),Object.keys(ownerTypeCounts),Object.values(ownerTypeCounts));
      pieCharts.landUse  = makePie(document.getElementById('landUseChart'),  Object.keys(landUseCounts),  Object.values(landUseCounts));
    }

    // recolor charts on theme change
    function recolorCharts(){
      const tickColor = cssVar('--muted'); const gridColor = cssVar('--grid'); const legendColor = cssVar('--legend-text');
      if (lineChart){
        lineChart.options.scales.x.ticks.color = tickColor;
        lineChart.options.scales.x.grid.color = gridColor;
        lineChart.options.scales.y.ticks.color = tickColor;
        lineChart.options.scales.y.grid.color = gridColor;
        lineChart.update();
      }
      for (const key of Object.keys(pieCharts)){
        const c = pieCharts[key]; if (!c) continue;
        c.options.plugins.legend.labels.color = legendColor;
        c.update();
      }
    }

    // ===== Disaggregated table (yearly; static) =====
    function pctIncrease(curr, prev){ if (prev==null || prev===0) return '—'; const pct=((curr-prev)/prev)*100; const sign=pct>0?'+':''; return `${sign}${pct.toFixed(1)}%`; }
    function buildTable(){
      const years = Object.keys(digitizedBreakdown).map(Number).sort((a,b)=>a-b);
      const tbody = document.querySelector('#disaggTable tbody'); tbody.innerHTML=''; let prev=null;
      for (const y of years){ const b=digitizedBreakdown[y]; const total=(b.Male||0)+(b.Female||0)+(b.Joint||0)+(b.Corporate||0);
        const tr=document.createElement('tr'); tr.innerHTML = `<td>${y}</td><td class="text-end">${fmt(b.Male||0)}</td><td class="text-end">${fmt(b.Female||0)}</td><td class="text-end">${fmt(b.Joint||0)}</td><td class="text-end">${fmt(b.Corporate||0)}</td><td class="text-end fw-semibold">${fmt(total)}</td><td class="text-end">${pctIncrease(total, prev)}</td>`; tbody.appendChild(tr); prev=total; }
    }

    // ===== Wire up controls =====
    function clampDates(){ let s=new Date(startDateEl.value||MIN_DATE); let e=new Date(endDateEl.value||MAX_DATE);
      if (s<MIN_DATE) s=new Date(MIN_DATE); if (s>MAX_DATE) s=new Date(MAX_DATE);
      if (e<MIN_DATE) e=new Date(MIN_DATE); if (e>MAX_DATE) e=new Date(MAX_DATE);
      if (e<s) e=new Date(s); startDateEl.value=iso(s); endDateEl.value=iso(e); return {s,e}; }
    function updateAll(){ const {s,e}=clampDates(); updateKPIRange(s,e); renderLine(s,e,aggSelect.value); }

    document.addEventListener('DOMContentLoaded', ()=>{
      // theme first
      applyTheme(getInitialTheme());
      // defaults for controls
      setDefaults(); updateAll();
      // render charts and table
      renderPies(); buildTable(); recolorCharts();
      // events
      startDateEl.addEventListener('change', updateAll);
      endDateEl.addEventListener('change', updateAll);
      aggSelect.addEventListener('change', updateAll);
      resetBtn.addEventListener('click', ()=>{ setDefaults(); updateAll(); });
      themeToggle.addEventListener('click', toggleTheme);
    });
  </script>

  </section>

  <!-- end service section -->
 <!-- service section -->

 

  <!-- end service section -->
  <!-- contact section -->
   
<style>
    /* THEME TOKENS */
    :root {
      --bg1: #f8fafc; /* light top */
      --bg2: #e2e8f0; /* light bottom */
      --text: #0f172a; /* slate-900 */
      --muted: #475569; /* slate-600 */
      --card-bg: rgba(255,255,255,0.9);
      --card-border: rgba(0,0,0,0.08);
      --grid: rgba(15,23,42,.12);
      --legend-text: var(--text);
      --chip-bg: rgba(59,130,246,.10);
      --chip-border: rgba(59,130,246,.25);
      --chip-text: #0f172a;
    }
    [data-theme="dark"] {
      --bg1: #0b1020; /* dark top */
      --bg2: #131a2b; /* dark bottom */
      --text: #e5e7eb; /* zinc-200 */
      --muted: #94a3b8; /* slate-400 */
      --card-bg: rgba(17,24,39,0.85);
      --card-border: rgba(255,255,255,0.06);
      --grid: rgba(148,163,184,.15);
      --legend-text: var(--text);
      --chip-bg: rgba(59,130,246,.12);
      --chip-border: rgba(59,130,246,.25);
      --chip-text: #bfdbfe;
    }

    body { background: linear-gradient(180deg, var(--bg1) 0%, var(--bg2) 100%); color: var(--text); }
    .card { background: var(--card-bg); border: 1px solid var(--card-border); border-radius: 18px; backdrop-filter: blur(6px); }
    .kpi { font-size: clamp(2rem, 4vw, 3.2rem); font-weight: 800; letter-spacing: -0.02em; }
    .sub { color: var(--muted); font-size: .95rem; }
    .footer-note { color: var(--muted); font-size: .85rem; }
    canvas { max-height: 360px; }
    .brand-badge { font-weight: 700; letter-spacing: .04em; color: #93c5fd; }
    .chip { display: inline-flex; align-items: center; gap:.4rem; padding:.35rem .6rem; border-radius: 999px; background: var(--chip-bg); color: var(--chip-text); border: 1px solid var(--chip-border); font-size:.9rem; }
    .controls .form-control, .controls .form-select { min-height: 40px; }
    .controls .btn { min-height: 40px; border-radius: 999px; }

    /* Table colors adapt to theme */
    .table-theme { --bs-table-bg: transparent; --bs-table-color: var(--text); --bs-table-striped-bg: color-mix(in srgb, var(--text) 6%, transparent); }
    [data-theme="dark"] .table-theme { --bs-table-color: #e5e7eb; --bs-table-striped-bg: rgba(148,163,184,.08); }

    /* Theme toggle styles */
    #themeToggle { border: 1px solid var(--card-border); background: var(--card-bg); color: var(--text); }
  </style>
 </body>
</html>