/* InfoMon 1.3.3 – colored KPIs + responsive + brand */
:root{
  --im-bg: #ffffff;
  --im-border: #dcdcde;
  --im-muted: #6b7280;
  --im-card: #ffffff;
  --im-shadow: 0 8px 18px rgba(0,0,0,.06);
  --im-kpi-wp: linear-gradient(135deg, #e0ecff, #d6e4ff);
  --im-kpi-php: linear-gradient(135deg, #e7e1ff, #ddd6fe);
  --im-kpi-db: linear-gradient(135deg, #def7ec, #c8f2e3);
  --im-kpi-plugins: linear-gradient(135deg, #fff1db, #ffe4b8);
}
@media (prefers-color-scheme: dark){
  :root{
    --im-bg: #0b0c0f;
    --im-border: #2a2c31;
    --im-muted: #9aa0a6;
    --im-card: #121417;
    --im-shadow: 0 10px 22px rgba(0,0,0,.35);
    --im-kpi-wp: linear-gradient(135deg, #0f2557, #0a3a8a);
    --im-kpi-php: linear-gradient(135deg, #372b6b, #4b3d91);
    --im-kpi-db: linear-gradient(135deg, #0f3d2e, #136c51);
    --im-kpi-plugins: linear-gradient(135deg, #593d0f, #8a5c0a);
  }
}

.infomon-wrap h1 { display:flex; align-items:center; gap:.5rem; }
.infomon-brand { margin: 6px 0 10px; }
.infomon-brand img { max-width: 220px; height:auto; opacity:.98; }
@media (prefers-color-scheme: dark){
  .infomon-brand img { filter: brightness(1.08) contrast(1.06); }
}

.infomon-madeby { margin-top:4px; opacity:.7; }
.infomon-toolbar { display:flex; flex-wrap: wrap; gap:8px; margin:12px 0 16px; }
.infomon-json { width:100%; height:240px; margin-top:12px; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace; }

/* KPI cards */
.infomon-kpis{
  display:grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap:12px; margin: 10px 0 14px;
}
.infomon-kpi{
  background: var(--im-card);
  border:1px solid var(--im-border);
  border-radius:14px; padding:14px 16px;
  box-shadow: var(--im-shadow);
  position: relative;
  overflow: hidden;
}
.infomon-kpi::after{
  content:""; position:absolute; inset:0; z-index:0; opacity:.8;
  background: linear-gradient(135deg, rgba(255,255,255,.8), rgba(255,255,255,0));
}
.infomon-kpi-value{ font-size:24px; font-weight:800; position:relative; z-index:1; }
.infomon-kpi-label{ font-size:12px; text-transform:uppercase; color: var(--im-muted); letter-spacing:.04em; position:relative; z-index:1; }

/* Accent backgrounds per KPI */
.infomon-kpi--wp{ background-image: var(--im-kpi-wp); }
.infomon-kpi--php{ background-image: var(--im-kpi-php); }
.infomon-kpi--db{ background-image: var(--im-kpi-db); }
.infomon-kpi--plugins{ background-image: var(--im-kpi-plugins); }

/* Cards */
.infomon-cards{
  display:grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap:12px; margin: 6px 0 16px;
}
.infomon-card{
  background: var(--im-card);
  border:1px solid var(--im-border);
  border-radius:14px; padding:14px 16px;
  box-shadow: var(--im-shadow);
}
.infomon-card-title{
  font-weight:700; margin-bottom:10px; font-size:14px; letter-spacing:.02em;
  border-left:4px solid #5a67d8; padding-left:8px;
}
.infomon-list{ margin:0; padding:0; list-style:none; }
.infomon-list li{ display:flex; gap:.5rem; margin:6px 0; align-items:baseline; }
.infomon-list strong{ min-width:180px; }
.infomon-list span, .infomon-list a{ overflow-wrap:anywhere; word-break:break-word; }

/* Table view – fixed layout & wrapping to avoid overflow */
.infomon-table{ table-layout: fixed; width:100%; }
.infomon-table .infomon-section th { background:#f6f7f7; text-transform:uppercase; font-size:12px; letter-spacing:.03em; }
.infomon-key { width: 40%; font-weight:600; }
.infomon-val { width: 60%; overflow-wrap:anywhere; word-break:break-word; }
.infomon-val a{ overflow-wrap:anywhere; word-break:break-word; }

/* Tighter spacing inside dashboard widget */
#dashboard_right_now .infomon-kpis,
.postbox .infomon-kpis{ margin-top:6px; }