/* InfraTech Hub Calculators — theme-friendly UI */

.ith-calculator{
  font-family: inherit;
  max-width: 100%;
  margin: 16px 0;
  color: var(--ith-text, var(--wp--preset--color--contrast, #111827));
  font-size: calc(14px * (var(--ith-font-scale, 100%) / 100));
}
.ith-calculator *{ box-sizing: border-box; }

:root{
  --ith-accent: var(--wp--preset--color--primary, var(--ast-global-color-0, #2563eb));
  --ith-accent-contrast: #ffffff;
  --ith-surface: var(--wp--preset--color--base, #ffffff);
  --ith-surface-2: color-mix(in srgb, var(--ith-surface, #fff) 88%, #000 12%);
  --ith-border: color-mix(in srgb, var(--ith-surface, #fff) 80%, #000 20%);
  --ith-muted: color-mix(in srgb, var(--ith-text, #111827) 60%, var(--ith-surface, #fff) 40%);
  --ith-radius: 14px;
  --ith-card-pad: 16px;
  --ith-border-w: 1px;
  --ith-shadow: 0 8px 22px rgba(0,0,0,.08);
  --ith-font-scale: 100%;
}
@supports not (color: color-mix(in srgb, #000 50%, #fff 50%)){
  :root{ --ith-surface-2:#f5f6f8; --ith-border:#e5e7eb; --ith-muted:#6b7280; }
}

.ith-loading{
  padding: 14px;
  border: var(--ith-border-w) solid var(--ith-border);
  border-radius: var(--ith-radius);
  background: var(--ith-surface-2);
  color: var(--ith-muted);
}
.ith-card{
  border: var(--ith-border-w) solid var(--ith-border);
  border-radius: var(--ith-radius);
  padding: var(--ith-card-pad);
  background: var(--ith-surface);
  box-shadow: var(--ith-shadow);
}
.ith-compact .ith-card{ padding: calc(var(--ith-card-pad) * 0.75); }
.ith-card h3{ margin:0; font-size: 18px; line-height:1.2; }

.ith-topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
  margin-bottom: 12px;
}
.ith-actions{ display:flex; gap:8px; flex-wrap:wrap; }

.ith-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding: 9px 12px;
  border-radius: 999px;
  border: var(--ith-border-w) solid var(--ith-border);
  background: var(--ith-surface);
  color: inherit;
  cursor: pointer;
  font-weight: 600;
  font-size: 13px;
  user-select:none;
}
.ith-btn.primary{
  background: var(--ith-accent);
  border-color: var(--ith-accent);
  color: var(--ith-accent-contrast);
}
.ith-btn:disabled{ opacity:.6; cursor:not-allowed; }

.ith-grid{ display:grid; grid-template-columns: 1fr; gap: 12px; }
@media (min-width: 720px){ .ith-grid.two{ grid-template-columns: 1fr 1fr; } }

.ith-field{ display:flex; flex-direction:column; gap:6px; }
.ith-label{ font-weight: 600; font-size: 13px; }
.ith-help{ font-size: 12px; color: var(--ith-muted); }

.ith-input, .ith-select{
  padding: 10px 12px;
  border: var(--ith-border-w) solid var(--ith-border);
  border-radius: 12px;
  font-size: 14px;
  width: 100%;
  background: var(--ith-surface);
  color: inherit;
}

.ith-results{
  margin-top: 12px;
  display:flex;
  flex-direction:column;
  gap: 10px;
}
.ith-metric{
  border: var(--ith-border-w) solid var(--ith-border);
  border-radius: 14px;
  padding: 12px;
  background: var(--ith-surface-2);
}
.ith-metric .k{ font-size: 12px; color: var(--ith-muted); }
.ith-metric .v{ font-size: 20px; font-weight: 800; margin-top: 2px; }

.ith-alert{
  border-radius: 14px;
  padding: 10px 12px;
  border: var(--ith-border-w) solid var(--ith-border);
  background: var(--ith-surface-2);
}
.ith-alert-error{ background:#fff1f2; border-color:#fecdd3; color:#9f1239; }
.ith-alert-warning{ background:#fffbeb; border-color:#fde68a; color:#92400e; }
.ith-alert-info{ background:#eff6ff; border-color:#bfdbfe; color:#1d4ed8; }

.ith-tabs{ display:flex; gap:8px; flex-wrap:wrap; margin: 10px 0 12px; }
.ith-tab{
  padding: 8px 10px;
  border: var(--ith-border-w) solid var(--ith-border);
  border-radius: 999px;
  cursor:pointer;
  background: var(--ith-surface);
  font-weight: 600;
  font-size: 13px;
}
.ith-tab.active{
  background: var(--ith-accent);
  border-color: var(--ith-accent);
  color: var(--ith-accent-contrast);
}

.ith-small{ font-size: 12px; color: var(--ith-muted); margin-top: 6px; }