<!-- Sektion: Klocka -->
    <section>
      <h2>Klocka</h2>

      <div class="prop-grid">
        <label>Stil</label>
        <select id="clock-style">
          <option value="digital">Digital</option>
          <option value="analog">Analog</option>
        </select>

        <label>Datum</label>
        <label style="display:flex;align-items:center;gap:.5rem;font-size:.9rem">
          <input type="checkbox" id="clock-show-date">
          Visa datum under klockan
        </label>

        <label>Position</label>
        <div style="display:flex;gap:.4rem;flex-wrap:wrap">
          <button type="button" id="clkpos-top-left"     class="secondary clock-pos-btn" onclick="setClockPos('top-left')">↖ Övre vänster</button>
          <button type="button" id="clkpos-top-right"    class="secondary clock-pos-btn" onclick="setClockPos('top-right')">↗ Övre höger</button>
          <button type="button" id="clkpos-bottom-left"  class="secondary clock-pos-btn" onclick="setClockPos('bottom-left')">↙ Nedre vänster</button>
          <button type="button" id="clkpos-bottom-right" class="secondary clock-pos-btn" onclick="setClockPos('bottom-right')">↘ Nedre höger</button>
          <button type="button" id="clkpos-center"       class="secondary clock-pos-btn" onclick="setClockPos('center')">⊙ Centrerad</button>
        </div>

        <label>Storlek</label>
        <div class="row">
          <span style="color:#555;font-size:.8rem;white-space:nowrap">Liten</span>
          <input type="range" id="clock-size" min="1" max="5" step="0.5" value="2"
                 oninput="document.getElementById('clock-size-val').textContent=this.value">
          <span style="color:#555;font-size:.8rem;white-space:nowrap">Stor</span>
          <span id="clock-size-val" style="color:#aaa;min-width:2rem;text-align:right">2</span>
        </div>

        <label>Färg</label>
        <input type="color" id="clock-color" value="#ffffff">

        <label>Opacitet</label>
        <div class="row">
          <input type="range" id="clock-opacity" min="10" max="100" step="5" value="90"
                 oninput="document.getElementById('clock-opacity-val').textContent=this.value+'%'">
          <span id="clock-opacity-val" style="color:#aaa;min-width:3rem">90%</span>
        </div>

        <label>Schema</label>
        <select id="clock-schedule-mode">
          <option value="always">Visa alltid</option>
          <option value="scheduled_only">Bara under schemalagd visning</option>
        </select>
      </div>

      <div class="row" style="margin-top:.75rem">
        <button onclick="aktiveraClock()">Aktivera</button>
        <button class="secondary" onclick="avaktiveraClock()">Stäng av</button>
        <span id="clock-status" style="color:#aaa;font-size:.85rem;align-self:center"></span>
      </div>
    </section>