<div class="row row-cols-1 row-cols-xxl-6 row-cols-lg-3 row-cols-md-2">

  <!-- Monitored Collection Points -->
  <div class="col">
    <div class="card widget-icon-box">
      <div class="card-body">
        <div class="d-flex justify-content-between">
          <div class="flex-grow-1 overflow-hidden">
            <h5 class="text-muted text-uppercase fs-13 mt-0" title="Collection points actively tracked via the urban digital twin with optional AR feedback.">Monitored Collection Points</h5>
            <h3 class="my-3">128</h3>
            <p class="mb-0 text-muted text-truncate">
              <span class="badge bg-success me-1"><i class="ri-arrow-up-line"></i> 5%</span>
              <span>Since yesterday</span>
            </p>
          </div>
          <div class="avatar-sm flex-shrink-0">
            <span class="avatar-title text-bg-success rounded rounded-3 fs-3 widget-icon-box-avatar shadow">
              <i class="ri-map-pin-2-fill"></i>
            </span>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- Routes Optimized Today -->
  <div class="col">
    <div class="card widget-icon-box">
      <div class="card-body">
        <div class="d-flex justify-content-between">
          <div class="flex-grow-1 overflow-hidden">
            <h5 class="text-muted text-uppercase fs-13 mt-0" title="Number of AI-optimized waste collection routes dispatched today.">Routes Optimized Today</h5>
            <h3 class="my-3">24</h3>
            <p class="mb-0 text-muted text-truncate">
              <span class="badge bg-info me-1"><i class="ri-arrow-up-line"></i> 2</span>
              <span>Since yesterday</span>
            </p>
          </div>
          <div class="avatar-sm flex-shrink-0">
            <span class="avatar-title text-bg-info rounded rounded-3 fs-3 widget-icon-box-avatar shadow">
              <i class="ri-road-map-fill"></i>
            </span>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- Predicted Waste Volume -->
  <div class="col">
    <div class="card widget-icon-box">
      <div class="card-body">
        <div class="d-flex justify-content-between">
          <div class="flex-grow-1 overflow-hidden">
            <h5 class="text-muted text-uppercase fs-13 mt-0" title="Total waste volume predicted for today based on model estimations and citizen input.">Predicted Waste Volume (kg)</h5>
            <h3 class="my-3">13,280</h3>
            <p class="mb-0 text-muted text-truncate">
              <span class="badge bg-danger me-1"><i class="ri-arrow-up-line"></i> 3.2%</span>
              <span>vs. weekly average</span>
            </p>
          </div>
          <div class="avatar-sm flex-shrink-0">
            <span class="avatar-title text-bg-danger rounded rounded-3 fs-3 widget-icon-box-avatar shadow">
              <i class="ri-weight-line"></i>
            </span>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- Operational Deviation -->
  <div class="col">
    <div class="card widget-icon-box">
      <div class="card-body">
        <div class="d-flex justify-content-between">
          <div class="flex-grow-1 overflow-hidden">
            <h5 class="text-muted text-uppercase fs-13 mt-0" title="Gap between expected and real-world route duration or distance.">Operational Deviation (%)</h5>
            <h3 class="my-3">+4.87%</h3>
            <p class="mb-0 text-muted text-truncate">
              <span class="badge bg-primary me-1"><i class="ri-arrow-up-line"></i> 1.2%</span>
              <span>vs. target baseline</span>
            </p>
          </div>
          <div class="avatar-sm flex-shrink-0">
            <span class="avatar-title text-bg-primary rounded rounded-3 fs-3 widget-icon-box-avatar shadow">
              <i class="ri-line-chart-fill"></i>
            </span>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- Citizen Interactions -->
  <div class="col">
    <div class="card widget-icon-box">
      <div class="card-body">
        <div class="d-flex justify-content-between">
          <div class="flex-grow-1 overflow-hidden">
            <h5 class="text-muted text-uppercase fs-13 mt-0" title="Number of messages processed by the AI bots across WhatsApp, Telegram, and Facebook in the past 24 hours.">Citizen Interactions (24h)</h5>
            <h3 class="my-3">310</h3>
            <p class="mb-0 text-muted text-truncate">
              <span class="badge bg-warning me-1"><i class="ri-arrow-up-line"></i> 9.2%</span>
              <span>vs. average day</span>
            </p>
          </div>
          <div class="avatar-sm flex-shrink-0">
            <span class="avatar-title text-bg-warning rounded rounded-3 fs-3 widget-icon-box-avatar">
              <i class="ri-message-3-fill"></i>
            </span>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- Twin Confidence Score -->
  <div class="col">
    <div class="card widget-icon-box">
      <div class="card-body">
        <div class="d-flex justify-content-between">
          <div class="flex-grow-1 overflow-hidden">
            <h5 class="text-muted text-uppercase fs-13 mt-0" title="AI twin model confidence based on feedback accuracy and adherence to planned routes.">Twin Confidence Score</h5>
            <h3 class="my-3">87%</h3>
            <p class="mb-0 text-muted text-truncate">
              <span class="badge bg-success me-1"><i class="ri-arrow-up-line"></i> 6%</span>
              <span>since last calibration</span>
            </p>
          </div>
          <div class="avatar-sm flex-shrink-0">
            <span class="avatar-title text-bg-dark rounded rounded-3 fs-3 widget-icon-box-avatar">
              <i class="ri-shield-check-fill"></i>
            </span>
          </div>
        </div>
      </div>
    </div>
  </div>

</div>
