html {
  overflow-x: hidden;
  touch-action: pan-y;
}
body {
  overflow-x: hidden;
  max-width: 100vw;
}

.tab-btn {
  padding: 0.5rem 0.7rem;
  font-size: 0.85rem;
  font-weight: 500;
  color: #64748b;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
}
@media (min-width: 640px) {
  .tab-btn {
    padding: 0.6rem 1rem;
    font-size: 0.9rem;
  }
}
.tab-btn:hover {
  color: #1e293b;
}
.tab-btn.tab-active {
  color: #2563eb;
  border-bottom-color: #2563eb;
}

.kpi-card {
  background: white;
  border: 1px solid #e2e8f0;
  border-radius: 0.75rem;
  padding: 1rem;
}
.kpi-label {
  font-size: 0.8rem;
  color: #64748b;
  margin-bottom: 0.25rem;
}
.kpi-value {
  font-size: 1.4rem;
  font-weight: 700;
  color: #0f172a;
}

.kpi-clickable {
  cursor: pointer;
}
.kpi-clickable:hover {
  border-color: #93c5fd;
}
.kpi-formula-hint {
  font-size: 0.7rem;
  color: #93c5fd;
  margin-top: 0.35rem;
}
.kpi-formula {
  font-size: 0.75rem;
  color: #475569;
  margin-top: 0.5rem;
  padding-top: 0.5rem;
  border-top: 1px dashed #e2e8f0;
  line-height: 1.5;
}

.input {
  border: 1px solid #cbd5e1;
  border-radius: 0.5rem;
  padding: 0.4rem 0.6rem;
  font-size: 0.875rem;
  width: 100%;
}
.input:focus {
  outline: none;
  box-shadow: 0 0 0 2px #3b82f6;
}

.btn-primary {
  background: #2563eb;
  color: white;
  font-weight: 500;
  border-radius: 0.5rem;
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
}
.btn-primary:hover {
  background: #1d4ed8;
}
.btn-secondary {
  background: white;
  border: 1px solid #cbd5e1;
  color: #334155;
  font-weight: 500;
  border-radius: 0.5rem;
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
}
.btn-secondary:hover {
  background: #f1f5f9;
}

.period-toggle-btn {
  padding: 0.4rem 0.9rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: #64748b;
  background: white;
}
.period-toggle-btn:not(:last-child) {
  border-right: 1px solid #cbd5e1;
}
.period-toggle-btn.period-toggle-active {
  background: #2563eb;
  color: white;
}

.rent-positive {
  color: #16a34a;
}
.payment-negative {
  color: #dc2626;
}

.input-suffix-wrap {
  position: relative;
}
.input-suffix-wrap .input {
  padding-right: 2.6rem;
}
.input-suffix {
  position: absolute;
  right: 0.7rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.8rem;
  color: #94a3b8;
  pointer-events: none;
}