/* Enforce Arial across all areas */
html, body, .wrap, .cl-overview-container, .cl-overview-table, .cl-middle, .cl-bottom, .widefat, button, input, select, textarea, h1, h2, h3, h4, h5, h6 {
  font-family: Arial, sans-serif !important;
}

/* Grid layout: 3/6 top, 1/6 middle, 2/6 bottom */
.cl-overview-container {
  display: grid;
  grid-template-rows: 3fr 1fr 2fr;
  gap: 16px;
}

/* iPhone/mobile optimization */
@media (max-width: 768px) {
  .cl-overview-container {
    grid-template-rows: auto auto auto;
  }
  .cl-middle {
    flex-direction: column;
    gap: 12px;
  }
  .cl-middle-right {
    justify-content: flex-start;
  }
}

.cl-top, .cl-middle, .cl-bottom {
  background: #fff;
  padding: 12px;
  border: 1px solid #ddd;
  border-radius: 8px;
}

/* Middle alignment: button + last-run on same line; TOTAL left-aligned, same baseline */
.cl-middle {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.cl-middle-left, .cl-middle-right {
  display: flex;
  align-items: center;
  justify-content: flex-start; /* left-aligned */
}
.cl-middle-row {
  display: flex;
  align-items: center;
  gap: 12px;
}
.cl-last-run {
  margin-left: 8px;
  color: #555;
}

.cl-total-actual {
  font-size: 1.6rem;
  font-weight: 700;
  margin-left: 0;
}

.cl-overview-table th, .cl-overview-table td {
  padding: 8px;
}

.cl-pos { background: #e6ffe6; } /* light green */
.cl-neg { background: #ffe6e6; } /* light red */

.cl-range-ok { background: #e6ffe6; }
.cl-range-bad { background: #ffe6e6; }

.cl-sep {
  height: 3px;
  background: #000;
  margin: 6px 0;
}

.cl-total-row td { font-weight: bold; }